CSS概述
1、用于HTML文档中元素的样式定义
2、尽量用CSS样式取代html属性
3、使用CSS样式的方式:
内联方式:定义在html元素中,不利于重用;
内部样式:html页面的头元素中,放在一对style标记里;
外部样式:将样式定义在外部CSS文件中,由html页面引用样式表文件;
样式规则由选择器和样式声明组成。
选择器:决定哪些元素使用这些规则;
样式声明:一对大括号,包含一个或多个属性/值对
CSS特征
继承性、层叠性(多个样式层叠为一个)、优先级
CSS样式优先级
1、由低到高:浏览器缺省设置-》外部、内部样式(子元素高于父元素)-》内联样式;最后一次定义为准。
2、改变最高优先级:属性值后增加 !important
3、html自带样式的优先级最低
CSS选择器
一、基础选择器
1、通用选择器,与任何元素匹配,慎用,会降低效率 *{}
2、元素选择器 html{} h1{}等
3、类选择器 .className{color:red;},不能以数字开头;
- 配合元素选择器实现对元素的细分设置。red类型对h1元素生效 h1.red{}
- 多类选择器:可将多个类应用于同一个元素,类之间用空格分开 class=“class1 class2”
4、id选择器 #idName{},唯一性,一个元素只能有一个id,一个id名称只能出现一次。
优先级:由低到高 元素-》class选择器-》id选择器
二、复合选择器
1、群组选择器:以逗号隔开的选择器列表,相同规则作用于多个元素
例:h1,h2,.red{color:red;}
2、后代选择器(包含选择器):对父元素的所有该后代元素起作用
例:h1 span{}
3、子代选择器:对父元素中的直接子元素起作用
例;h1>span{}
三、伪类选择器
用于向某些选择器添加特殊效果,(-选择器:伪类选择器)
1、链接伪类,用户定义链接-一般项目中不使用,直接定义a标记样式
-:link,适用于尚未访问的链接
-:visited,适用于访问过的链接,不支持定义字体大小
2、动态伪类,用于呈现用户操作
-:hover,适用于鼠标悬停在html元素时【低版本下不支持a以外的hover】
-:active,适用于html元素被激活时
-:focus,适用于html元素获得焦点时,只适用于表单元素
3、选择器优先级:
元素选择器:0,0,0,1
类选择器: 0,0,1,0
伪类选择器:0,0,1,1
ID选择器: 0,1,0,0
内联样式: 1,0,0,0
权值大的优先,权值相同,靠后的优先。
【样式不生效,考虑代码拼写和优先级】
CSS优化(高级):了解浏览器对CSS代码解释规则,能不用后代就不用,元素加类效率低
CSS尺寸与边框
单位
1、尺寸单位 %:百分比 ; pt:磅 9pt=12px ;px:像素;em:2em当前字体尺寸的两倍;
2、颜色单位:屏幕显示的颜色都是RGB:red、green、blue,色光三原色。
表达方式:rgb(X,X,X);rgb(X%,X%,X%);十六进制rgb颜色值:#rrggbb 如#f2f2f2,如;#rgb;
英文关键字
属性
1、尺寸属性:
长宽可变时,最大最小尺寸起作用。
width:80%;min-width:600px;max-width:600px;
height:300px;min-height:max-height:
【注意:宽和高只对块元素生效,行内元素是不生效的,比如a i 标签】
溢出:内容所需空间大于框本身
overflow:visible; 溢出可见
overflow:hidden; 溢出隐藏
overflow:scroll;始终显示滚动条
overflow:auto; 自动判断
overflow-x overflow-y 两个需要同时设置,如果只设置其中一个为auto,另一个会跟随这个。
哪些元素可以设置尺寸属性:块级元素:-p,-div,-h1-h6,ul,ol,li,dl,dt,dd等,存在weith,height的html元素如img,
table,input
2、边框属性:
边框线:
简单写法:border:width style color;
单边定义:border-left/right/top/bottom:width style color;
单独定义