导图社区 CSS
- 35
- 0
- 0
- 举报
CSS
css基础，CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML或XML（包括如SVG, MathML之类的XML分支语言）文档外观和格式的样式表语言。包含样式、盒子模型、float浮动、position定位、Z-index堆叠区、display 、透明度、引入方式、选择器。
编辑于2024-10-09 22:08:47- 层叠样式表
- CSS
- 相似推荐
- 大纲
CSS
样式
普通样式
text-align 设置内容位置 text-decoration 控制下划线 none没有 underline有 line-hight 行高 font-size 设置字体大小 font-weight 设置字体粗细的 font-famliy 设置字体样式 letter-spacing 设置中文字体之间的间距 word-spacing 设置英文单词之间的间距
列表样式
list-style-image:uri();
list-style-position: inside/outside;
盒子模型
边框样式
边框粗细
<style> .box{ width: 251px; height: 251px; background-color: #D7D7D7; border: solid; border-color: orange; /*border-width: 20px;*/ border-top-width: 10px; border-left-width: 20px; border-right-width: 30px; border-bottom-width: 40px; } </style>
边框颜色
.box{ width: 251px; height: 251px; background-color: #D7D7D7; border: solid; border-color:red blue;/*上下 左右*/ border-color:red blue blueviolet;/*red上 blue左右 blueviolet下*/ border-color:red blue blueviolet green;/*上右下左*/ /*border-top-color: yellow; border-left-color: orange; border-bottom-color: green; border-right-color: red;*/ } </style> </head> <body> <div class="box">同学们！！</div> </body>
单边框设置
margin
padding
radius边框圆角
box-shadow边框阴影
边框简写
<style> .box{ width: 251px; height: 251px; background-color: #D7D7D7; border:1px solid #3a6587 } </style> </head> <body> <div class="box">同学们！！</div> </body>
float浮动
设置浮动
float:left/right
清楚浮动
clear: left; <head> <meta charset="UTF-8"> <title></title> <style> .wrapper{ border: 1px solid black; width: 360px; height: 360px; } .content{ /*float: left; 排列，会按照父级来排*/ float: left;/* 会按照从左向右浮动 */ /*float: right;*/ width: 70px; height: 70px; border: 1px red solid; background-color: green; color: white; } #id9,#id8{ /*清除浮动，因为content浮动后面的div都会根着浮动，清楚 id8,id9不能左浮动（标准的从上往下显示）*/ clear: left; } </style> </head> <body> <div class="wrapper"> <div class="content">1</div> <div class="content">2</div> <div class="content">3</div> <div class="content">4</div> <div class="content">5</div> <div class="content">6</div> <div class="content">7</div> <div id="id8" class="content">8</div> <div id="id9" class="content">9</div> </div> </body>
解决塌陷
overflow: hidden;给父级设置更高级
<style> #box1{ width: 600px; background-color: olive; border: 1px solid red; height: 400px; overflow: hidden; /* 方式一：解决浮动塌陷问题，给父级设置固定高 */ } img{ float: left; }
在浮动下面清除浮动
/* 方式三：在浮动的下面清楚浮动 */ .divclass{ clear: left; clear: right; clear: both; /*清楚左右浮动 */ } </style> </head> <body> <div id="box1"> <div> 我是天空的一片云，偶尔投影在你的波心， 不必讶异，我是天空的一片云 我是天空的一片云，偶尔投影在你的波心， 不必讶异，我是天空的一片云 我是天空的一片云，偶尔投影在你的波心， 不必讶异，我是天空的一片云 我是天空的一片云，偶尔投影在你的波心， 不必讶异，我是天空的一片云 我是天空的一片云，偶尔投影在你的波心， 不必讶异，我是天空的一片云 我是天空的一片云，偶尔投影在你的波心， 不必讶异，我是天空的一片云 </div> <img src="img/江一燕.jpg" width="200px" /> <div class="divclass"></div> </div> </body>
position定位
absoulute绝对定位
position:absolute; 绝对定位（相对第一个带有定位属性的父元素进行定位，默认是浏览器） /*绝对定位：会脱离原来的层，box1这一层被腾空了，别的层就可以上去了，只是不同的层而已，每个absolute都是一层，可以自由动*/
relative相对定位
相对定位（相对默认位置进行定位，不脱离文档流，仍占据页面位置）
fixed固定定位
position:fixed; 相对浏览器进行固定定位
z-index堆叠
数字越大在上层
display
display:none; 隐藏元素 display:block; 将元素变为块元素 display:inline; 将元素变为行元素 display:inline-block; 将元素变为行内块元素
none
block
inline-block
inline
透明度
rgb(,,,0~1)
opacity(0~1)
对标签里的所有元素进行设置
选择器
基本选择器
标签选择器
标签选择器主要是根据标签的名字进行元素的选择 语法：.类名{} 例如：.div-cls{color:red;}
类选择器
类选择器是通过class属性进行元素的获取，可用于对多个元素进行相同的样式设置 语法：.类名{} 例如：.div-cls{color:red;}
id选择器
id选择器是通过id属性给元素一个唯一标识（设置多个id相同不会报错，会影响后期js的学习，建议id值要唯一） 语法：#id名{} 例如：#div-id{color:red;}
属性选择器
属性选择器是根据元素上已有的属性标识进行选择 语法：[属性名='']{} <button title="普通按钮">普通按钮</button> <a href="http://www.baidu.com">百度链接</a> <a href="www.sina.cn">新浪博客</a> <a href="http://www.yunhe.cn">云和数据</a> /*具有title属性的元素*/ [title]{ font-size: 18px; } /* 以...开始 */ [href^="http"]{ color: #008B8B; } /* 以...结束 */ [href$="cn"]{ color: #483D8B; } /*href中包含有i*/ [href*='i']{ color: #808080; }
后代选择器
后代选择器是根据元素在页面中的相对（嵌套）位置进行按区域选择元素 <style> /* 层级选择器 */ /* 祖宗后代 */ div span{ color: #008000; } /* 父子选择器 */ div > span{ color: red; } /* 兄弟选择器 */ div ~ p{ background-color: #FFC0CB; } /* 跟班选择器 */ p + span { background-color: #008000; } </style> </head> <body> <!-- 在包裹关系中，样式有继承关系 --> <div> div中的不带标签的内容 <p> <a href="">百度一下 <span>你就知道 </span> </a> </p> <a href="">一燕一下</a> <span>后代选择器，注意很常用</span> </div> <!-- 所有的选择器默认是从body标签中进行查找元素的 --> <p> <span>p标签中的span标签</span> </p> </body>
祖宗后代
div span{ color: #008000; }
父子选择器
/* 父子选择器 */ div > span{ color: red;
兄弟选择器
/* 兄弟选择器 */ div ~ p{ background-color: #FFC0CB; }
跟班选择器
/* 跟班选择器 */ p + span { background-color: #008000; }
组合选择器
组合选择器是根据元素在页面中的同级关系进行选择 <div> div中的不带标签的内容 <span>组合选择器，注意很常用</span> </div> <p> <span>p标签中的span标签</span> </p> <h4> <span>h4标签中的span标签</span> </h4> /* 逗号就代表前后的元素是同等级的 */ div span,p span{ color: #00BFFF; }
伪类选择器
伪类选择器在超链接上的应用，超链接的字体颜色只有将样式直接作用在超链接上时才会生效
默认被点击时
a:link{ color: red; }
访问之后的状态
/* 访问之后的状态 */ a:visited{ color: darkgoldenrod; }
处在活动中
/* 处在活动状态 */ a:active{ color: brown; }
鼠标悬浮时
/* 鼠标悬浮时的状态 */ a:hover{ color: aqua; }
*通配符
*{ color:red; font-size:20px; } *通配符，作用在页面中的所有标签上，开发不建议使用，影响网页的渲染性能 开发不建议使用通配符，通配符相当于是作用在了所有的标签上，某些属性并不是所有的标签都能识别，只要加了属性不论是否生效，浏览器都会对属性进行解析然后渲染，这样比较消耗性能
选择器优先级
<div class="div-cls" > <span class="span-cls" id="span-id" style="color: red;">选择器优先级</span> </div> /* !important>行内样式>id选择器>类选择器>标签选择器 1000 100 10 1 */ /*1+100=101*/ div #span-id{ color: darkcyan; } /*100*/ #span-id{ color: blue; } /*10+10=20*/ .div-cls .span-cls{ color: black; } /*10+1=11*/ .div-cls span{ color: red; } /*1+10=11 如果权重值相同，后台会覆盖上面样式*/ div .span-cls{ color: #B8860B; } /*10*/ .span-cls{ color: blueviolet; } /*1+1=2*/ div span{ color: #A52A2A; } /*1*/ span{ color: #7B68EE!important; }
引入方式
行内
将样式直接写在标签上
<!-- 行内样式 --> <div style="color: green; border: 1px solid red;">每天叫醒我的不是闹钟，是梦想！！！</div> <div style="color: green; border: 1px solid red;">每天叫醒我的不是闹钟，是梦想！！！</div> <div style="color: green; border: 1px solid red;">每天叫醒我的不是闹钟，是梦想！！！</div>
内部
即在当前页面的 head 标签内，使用 style 标签进行样式设置
<style> /* 选择器 */ div{ color: brown; border: 1px solid red; } p{ color: pink; } </style> </head> <body> <div>每天叫醒我的不是闹钟，是梦想！！！</div> <div>每天叫醒我的不是闹钟，是梦想！！！</div> <div>每天叫醒我的不是闹钟，是梦想！！！</div> <p>小面包</p> <p>小cookie</p> <p>小饼干</p> </body>
外部
创建CSS文件
<head> <meta charset="utf-8" /> <title></title> <!-- 引入css样式： link --> <link rel="stylesheet" type="text/css" href="css/01.css" /> <!-- 引入css样式：@import --> <!-- <style> @import url("css/01.css"); </style> --> </head> <body> <div>每天叫醒我的不是闹钟，是梦想！！！</div> <div>每天叫醒我的不是闹钟，是梦想！！！</div> <div>每天叫醒我的不是闹钟，是梦想！！！</div> <p>小面包</p> <p>小cookie</p> <p>小饼干</p> </body>