我们如何才能写出一个精致漂亮的页面呢，这里就需要我们的css样式了，而我们的css样式需要写在哪呢，接下来我们上代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- 写样式的位置，相当于化妆间 --> <style type="text/css"> <!--在这里写我们的css样式--> </style> <body> </body> </html>
我们写样式的时候需要注意的点有哪些呢？这里我写的比较通俗易懂些
样式包含两部分:
选择器 申明
属性:值;
css的语法规则:选择器{属性:值}
写样式步骤:
准备人(指定要修改样式的标签)
准备化妆间(在head标签里面写上style标签)
指定人进入化妆间开始化妆(选择器{属性:值;})
样式的基本规则:
1:属性与值之间用英文冒号连接，分号结束
2:属性与属性之间可以空格,可以换行，没有先后顺序
3:一个属性中有多个属性值时,属性值与属性值之间用空格隔开，没有先后顺序
4:属性与属性值必须在花括号中
通过上面的规则来写我们css样式
那我们的样式有哪几种写法呢？
样式三种写法: 1:内部样式 存在head标签中 2:内联样式 以属性style的方式添加在标签中 3:外部样式 创建独立的html页面,并在页面head标签中添加 <link rel="stylesheet" href="文件地址"> 另一种引入方式: 在style标签第一行添加 @import url(css文件地址) 创建独立的css文件 样式表权重关系 外部样式 内部样式 < 内联样式 就近原则
我们用css样式来渲染样式到页面上呢，这里就需要我们的选择器
选择器:
类型选择器(标签选择器):div span h1 p ...
类选择器(class选择器):选中指定的元素，在一个页面中可以多次出现
1:在标签中添加属性 class="mz"
2:在样式中得选择器 .mz{}
id选择器:选中指定的元素，在一个页面中相同值只允许出现一次
1:在标签中添加属性 id="mz"
2:在样式使用添加选择器#mz{}
伪类选择器:
:link{} 未访问之前的状态
:visited{} 访问过后的状态
:hover{} 鼠标悬停的状态
:active{} 鼠标按下的状态
注意:有顺序要求 love hate
通配符 * 匹配页面所有的元素
群组选择器 选择器1,选择器2,选择器3{}
包含选择器(后代选择器)选择器1 选择器2 选择器3{}
我们在同一选择器下的css样式会后写的覆盖前面的写的样式，但是有些时候我们后写的样式无法成功渲染，这是为什么呢，这是因为选择器有权重问题
选择器权重对比
id > class > 类型选择器
100 10 1
内联样式选择器权重值 1000
包含选择器权重值为各个选择器权重之和
css层叠性:
指的就是css优先加载权重高的
了解我们css的一些规则之后，我们开始学习css有那些常用的属性
css属性: color:文本颜色; 颜色单词:red blue... 十六进制:#00ddff #0df aabbcc才可以缩写 取值范围0-9 a-f 三原色:rgb(0,0,0) red green blue 取值范围是0-255 font-size:文本大小; px 最小文本12px 默认显示文本16px 9pt = 12px em 跟随最近的父级文本大小 rem 跟随根元素(html)的文本大小 font-weight:文本是否加粗; bold 加粗 normal 常规文本(不加粗) bolder 更加粗 100-400 变细 500 常规文本 600-900 加粗 font-style:倾斜; normal 常规文本(不倾斜) italic 倾斜 oblique 倾斜 line-height:行高;(控制文本垂直方向的对齐方式) 行高值 < 高度值 偏上 行高值 = 高度值 垂直居中 行高值 > 高度值 偏下 注意:针对单行文本设置 font-family:字体1,字体2,字体3; 1:中文字体加引号 2:多个英文单词的字体加引号 3:多个字体之间用逗号 4:单个英文单词字体不需要加引号 综合写法: font:倾斜 加粗 文本大小/行高 字体; text-align:文本水平对齐方式; left 左对齐(默认值) center 居中 right 右对齐 justify 两端对齐 边框 border:边框粗细 边框形态 边框颜色; border-top:;顶部边框 border-right:;右边框 border-bottom:;底部边框 border-left:;左边框 三角形: width:0; height:0; border:10px solid transparent;颜色透明 border-top-color:red; text-decoration:文本修饰; none ，没有修饰 overline 上划线 line-through 中划线 underline 下划线 letter-spacing:字符间距; px word-spacing:词间距; px text-indent:首行缩进; em 针对文本段落第一行设置 list-style:列表修饰; list-style:; = list-style-type:; list-style-type:; disc 实心圆 circle 空心圆 square 实心方块 none 没有修饰 list-style-image:url("图片地址"); list-style-position:图片位置; outside 外部 inside 内部 页面垂直布局: 顶部区域 轮播图区域 内容区域 底部区域 背景相关属性: background-color:背景颜色; 颜色单词:red green... 十六进制值:#aabbcc #abc 取值范围:0-9 a-f 三原色值:rgb(0,0,0) 0-255 background-image:url("图片路径"); 默认情况是平铺的 与img标签的区别: img是标签,是结构,占据页面位置 挂在墙上的一幅画,可以盖住背景图 background-iamge:;是css样式,不占据位置 画在墙上的一幅画,被img盖住 background-repeat:是否平铺; repeat 平铺(默认值) no-repeat 不平铺 repeat-x 水平平铺 repeat-y 垂直平铺 background-position:背景定位; 关键字: 水平值 left center right 垂直值 top center bottom 浮动的属性: float:; left 左浮动 right 右浮动 none 不浮动 浮动的目的: 让竖着的元素横着来 浮动效果 1:左浮动找左边,右浮动找右边 2:浮动只影响后面的元素,不影响前面的元素 3:父级元素的宽度小于浮动子元素的总宽度,子元素将被迫换行 4:子元素高度不一致的浮动元素被迫换行时,可能会被卡住 5:结构先写的先浮动,后写的后浮动 6:图文混排(图文环绕) 7:浮动产生的问题,父级元素高度塌陷 解决办法:给父元素添加height:;
在我们的css中还有盒模型，我们也一起了解下吧
外边距:改变元素外边的间距
内边距:改变元素与内容的间距
padding:一个值;一个值,改变4个方向
padding:上下 左右;
padding:上 左右 下;
padding:上 右 下 左;顺时针方向变化
padding-top:顶部内边距;
padding-right: 右内边距;
padding-bottom: 底部内边距;
padding-left:左内边距;
注意:内边距没有负值;
margin:四个方向;
margin:上下 左右;
margin:上 左右 下;
margin:上 右 下 左;
margin-top:上外边距;
margin-right:右外边距;
margin-bottom:下外边距;
margin-left:左外边距;
注意:margin可以为负值,auto自适应
margin常见bug:
1:上下外边距相遇,只显示较大值
2:嵌套关系的元素，子元素的上外边距和父元素的上外边距相遇，取较大值
盒模型占位大小计算:
w = width+左右边框+左右内边距+左右外边距
h = height+上下边框+上下内边距+上下外边距
我们有的时候需要计算盒子的占位大小，因为这会影响我们整个页面的布局，如果不及时解决，到时整个页面都会因你这个问题牵一发而动全身，在这里我准备了个小案例让大家了解下如何计算盒模型的占位大小
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background: red; border: 10px solid #000; margin: 30px 20px; padding: 10px 4px; } </style> </head> <body> <!-- 盒模型占位大小计算: w = width+左右边框+左右内边距+左右外边距 200+10+10+4+4+20+20 h = height+上下边框+上下内边距+上下外边距 200+20+20+60 200+8+1+10 200+8+3+10 --> <div class="box"></div> </body> </html>
以上就是我们常用的css属性，其实还有很多，我这里就不一一列举了，有兴趣的同学可以去W3C看下，谢谢
原文：https://www.cnblogs.com/wamhy/p/13144626.html