一、选择器的优先级:考虑选择器的权重,数值越大优先级越高
标签selector: 1
类选择器: 10
ID选择器: 100
行内样式: 1000
群组选择器不参与计算
后代和子代选择器由各种选择器权值相加得到最终的优先级
伪类选择器的权值与类选择器保持一致,都是10
二、尺寸单位与颜色取值
1.尺寸单位
px:像素单位,浏览器默认单位
%:百分比,参照父元素对应属性的值计算
in:inch 英寸 1 inch = 2.54 cm
pt:磅 1 pt = 1 / 72 in
cm、mm
em:默认字体大小为16px,1 em = 16px;
2.颜色取值
英文单词:blue、red、black、orange......
rgb(r,g,b):根据红绿蓝三原色组合呈现不同的颜色,取值范围0~255,值越大,颜色越饱和
红色:rgb(255,0,0) ; 绿色:rgb(0,255,0); 蓝色:rgb(0,0,255); 黑色:rgb(0,0,0); 白色:rgb(255,255,255)
rgba(r,g,b,alpha) alpha:透明度取值范围 0(透明)~ 1(不透明)
颜色的十六进制表示法:把三原色的十进制范围0-255转换成十六进制表示,以#开头,跟上6位16进制,每两位为一组表示一种三原色
短十六进制表示颜色:以#开头,跟上3位16进制,浏览器解析时,自动对每一位进行重复,补全成长十六进制
三、HTML标签分类
1.块级元素:body、h1-h6、div、ul、ol、li、table、form、p
特点:独占一行,不与其他元素共行,可以手动调整宽高,默认块元素的宽度与父元素保持一致
2.行内元素:span、label、i、b、s、u、sup、sub、strong
特点:可与其他元素共行显示,不可以手动调整宽高大小,实际大小由元素的内容多少决定
3.行内块元素:img、input、button
特点:可以共行显示,可以手动调整宽高
四、尺寸与边框
1.尺寸
属性:width、height
溢出:内容超出元素尺寸范围,默认溢出部分可见
溢出处理:属性overflow
值:visible 默认值,溢出部分仍然可见
scroll 添加滚动条,包含水平和垂直方向,不管该方向有没有发生内容溢出,都显示滚动条
auto 自动添加滚动条,哪个方向发生内容溢出就添加该方向上的滚动条
hidden 隐藏溢出部分
2.边框 border:border-width border-style border-color 三个值分别为:宽度、样式、颜色,缺一不可
border-width:取像素值,设置四个方向边框宽度
border-style:边框样式 solid:实线 dashed:虚线 dotted:点线 double:双线
border-color:边框颜色,取颜色值
注意:使用border属性为元素设置边框是同时设置四个方向的边框;取消默认边框,border:none;
单边框设置:
border-top:设置顶部边框 border-right:设置右边边框
border-bottom:设置底部边框 border-left:设置左边边框
取值同border
3.网页三角标制作:
<style> 标签选择器给div添加样式 div{ width:0; 宽0 height:0; 高0 border-top:20px solid red; 边框顶部红色,其他方向透明色 border-right:20px solid transparent; border-bottom:20px solid transparent; border-left:20px solid transparent; 边框四个方向必须等宽 } </style> </head> <body> <div></div> </body>
4.轮廓线 outline:width style color
轮廓线围绕在元素内容区域四周,与边框类似,但轮廓线在网页中不占位
取消轮廓线 outline:none;
5.圆角边框 border-radius:像素值或百分比;
border-radius:20px;表示四个角都以20px做圆角
border-radius:20px 40px;按照上右下左(顺时针方向)设置圆角,从左上角开始取值,给两个值的时候,上下一致,左右一致
border-radius:10px 20px 30px;取三个值,缺少的第四个值与第二个值保持一致
border-radius:10px 20px 30px 40px;分别设置四个角的圆角程度
border-radius:50%; 参照当前元素的尺寸进行计算,若元素本身为长方形则会变成椭圆,若为正方形则变成圆
6.盒阴影 box-shadow:offset-x offset-y blur spread color;
offset-x:阴影的水平偏移距离,取像素值
offset-y:阴影的垂直偏移距离,取像素值
blur:阴影的模糊程度,取像素值,值越大越模糊
spread:阴影的延伸距离(可选),取像素值,可以扩大阴影的范围
color:设置阴影颜色,默认为黑色
注意:不管是浏览器窗口中还是元素本身都存在坐标系,都以左上角为(0,0)点,向右、向下代表X轴和Y轴的正方向
五、盒模型(框模型) 在css中认为一切元素都是框,都是矩形区域,可以计算元素在文档中的实际占位情况
盒模型组成:margin(外边距)、border(边框)、padding(内边距)、content(元素的宽高尺寸)
实际计算:最终宽度=左右外边距+左右边框+左右内边距+width
最终高度=上下外边距+上下边框+上下内边距+height
1.margin:元素边框与其他元素边框之间的距离,取像素值
margin:10px; 表示设置四个方向都为10px的外边距
margin:10px 20px; 表示上下外边距为10px,左右外边距为20px
margin:10px 20px 30px; 缺少的第四个值和第二个值保持一致
margin:10px 20px 30px 40px; 上下左右外边距依次为10、20、30、40px
2.单方向外边距的设置,只给当前方向设置外边距,给一个值,取像素值
margin-top:上方外边距
margin-right:右边外边距
margin-bottom:底部外边距
margin-left:左边外边距
3.特殊取值
margin:0;设置元素外边距为0,常用于初始化页面样式,取消一些元素的默认外边距
margin:0 auto;设置左右外边距自动,用来实现元素的居中效果。auto只对左右外边距起作用。
取负值:会移动元素的位置,负值表示向上向左移动元素,常用页面元素位置的微调
4.自带默认外边距的元素:body、h1-h6、p、ul、ol