什么是CSS
层叠样式表（cascading style sheet）
控制页面元素的显示方式。（添加样式）
CSS语法
行间样式
行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。
<p style="color: red;background: #ccc;">这是一段测试文字</p>
非行间样式
非行间样式包括内联样式和外联样式
内联样式（嵌）
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。
属性的值是一个单词，此时不需要引号；如果是多个单词，需要添加引号。
格式如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--内联样式--> <style> /*选择器：选择添加样式的元素 *声明：属性：值*/ p{ color: #f00; } </style> </head> <body> <p>这是一段测试文字</p> </body> </html>
外联样式
优先级
行间样式 > 非行间样式（内联样式和外联样式），内联样式和外联样式由顺序结构决定，谁在下面谁决定样式。
选择器
基本选择器
标签选择器
html{color: black;} p{color: gray;} h2{color: silver;}
ID选择器
ID是唯一的
#p1{ color: #FF0000; } <p id="p1">这是一段测试文字</p>
类选择器
<style> .box{ color: #FF0000; } </style> <p class="box">这是一段测试文字</p> <h2 class="box">这是一段测试文字</h2>
优先级
ID选择器 > 类选择器 > 标签选择器
高级选择器
并集选择器
#p1,h2{ color:red; }
交集选择器
p.box{ color:green; }
后代选择器
p span{ color:red; }
通配选择器
*{ color:blue; }
样式具有继承性
属性选择器
[属性名]/[属性名=值]{ color:red; }
样式
文本样式
color:修改文本的颜色
text-align:元素的内容对齐方式(水平方向)
line-height:行高
text-decoration:文本修饰 none
字体样式 font
font-size:字体大小 div{ /*font-size:20px; font-family: arial,"新宋体"; font-weight: bold;*/ font: bold 20px arial,"宋体"; }
背景
background
background-color: #ccc;
background-image: url(img/2.jpg);
background-repeat: no-repeat;
background-position: 10px 10px;*/
background: #ccc url(img/2.jpg) no-repeat;宽高
width
height
列表
list-style-type: none; 去除标志
其他属性
display: none隐藏 block显示
cursor: pointer; 可点击状态盒子模型(div+css)
border /*border-style: solid;/*边框样式*/ /*border-width: 1px; border-color: green;*/ border: 1px solid green; padding /*padding-left: 10px; padding-top: 10px; padding-right: 10px;*/ padding: 10px 20px 10px 30px;/*上右下左*/ margin /*margin-left: 20px; margin-top: 20px;*/ margin: 20px 30px 40px 50px; 盒子总宽度=element的宽度+(padding+border+margin)*2
页面布局
浮动:float:left
浮动脱离文档流，挨着父级组件的左边框，浮动兄弟组件的右边框停止浮动
清除浮动:clear : left right both
定位
position:
relative:相对定位(不会脱离文档流)
absolute:绝对定位
如果父级是absolute或者没有设置position,此时该组件将会向上寻找position为ralative的组件，直到window为止。
如果父级设置postion为relative，此时根据父级组件定位。
脱离文档流。
z-index: z轴的位置
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/11163.html