1.0 CSS基础之引用、选择器、继承与层叠、优先级
发布于 2022年 04月 09日 23:55
什么是CSS
进行外观控制并定义HTML内容在浏览器内的显示样式
CSS的优点
- 简化HTML相关标签,网页体积小,下载快
- 解决内容与表现分离的问题
- 更好维护网页,提高工作效率
1.1 CSS基本语法
由选择器和声明两部分组成
声明 放置在一对紧邻选择器的大括号 {}
内,声明之间用 ;
隔开
CSS引用
语法:写在 <head> </head> 标签内:(嵌入样式)
<style type="text/css">
CSS样式
</style>
切记一切标点符号都要用英文输入
在CSS引用中,注释不使用<!--注释内容-->,而是/*注释内容*/,与C语言类似。
举个栗子:
效果如下
如果多个标签需要进行同样的一步或多步设置,可以将这些标签归在一个CSS样式前设置
<style type="text/css">
p,a{font-size:30px;font-family:"幼圆"}
a{color:green}
p{color:red}
</style>
效果如下
同样进行了字号和字体设置,但是分开进行颜色设置,这样就可以快捷地对同类标签进行设置
1.2 CSS使用方法
CSS样式的应用场合和如何使用?
行内样式(内嵌样式)
在前标签内添加style样式 语法:
<p style="color:red;font-size;">内容</p>
不建议大量使用,适合小范围设置
内部样式表(嵌入样式)
但是,为了防止低版本浏览器不识别<style>标签,导致标签内代码不慎出现在网页中,我们用HTML的注释标签<!---->来包住<style>里面的内容
操作如下:
外部样式表
把CSS样式代码写在独立的一个文件中
扩展名:文件名xxx.css
在css文件中直接书写样式设置即可
语法:
<link href="xxx.css" rel="stylesheet" type="text/css"/>
同样需要放入<head>...</head>标签内
导入式
语法:写在<style type="text/css">...</style>标签内第一行
- @import "xxx.css"
- @import url(xxx.css);
<head>
<style type="text/css">
@import "xxx.css"
</style>
</head>
或者
<head>
<style type="text/css">
@import url(xxx.css);
</style>
</head>
CSS使用方法的区别
使用外部样式的好处
- CSS和HTML分离
- 多个文件可以使用同一个样式文件
- 多文件引用同一个CSS文件,CSS只需下载一次
CSS使用方法优先级
对于同一个元素,同时使用方法设置CSS样式,起作用的先后顺序
-
行内样式>(内部样式/外部样式)>导入式样式
-
内部样式和外部样式之间,外部样式之间,就近原则
1.3 CSS选择器
选择器分类:
- 标签选择器
- 类选择器
- ID选择器
- 全局选择器
- 群组选择器
- 后代选择器
标签选择器
以HTML标签作为选择器
直接对标签名进行设置,但是只适用大面积设置
类选择器
区分大小写
- 为HTML的开始标签添加class属性
2. 通过类选择器为有class属性的元素设置CSS样式
切记,一定要在class名前加“ . ”
- 在一类元素下进行不同的设置
把p和h1都分在类选择器special标签下
效果如下
- 同一个标签下可以设置多个类选择器
在class标签内写入另一个类选择器,并用空格分隔开,不能写另一个class!
ID选择器
与类选择器类似
区分大小写
- 给标签id值
2. 为id设置CSS值
效果如下:
群组选择器
把相同样式设置的标签归为一类进行设置
全局选择器
对所有标签进行统一样式设置
谨慎使用
后代选择器
先看一看标签之间的辈分吧:
<em>标签是<p>标签的子标签
先父标签<p>再子标签<em>
<p>内的<em>
若只想改变159的颜色
给159命名一个类选择器
在父标签和子标签中间加上.类选择器
伪类
-
伪类选择器定义特殊状态下的样式
-
无法用标签、id、class及其他属性实现
链接的四种状态:激活状态、已访问状态、未访问状态、鼠标悬停状态
伪类 | 说明 |
---|---|
:link | 未访问的链接 |
:visited | 已访问的链接 |
:hover | 鼠标悬停状态 |
:active | 激活(点击)那一刻的链接 |
举个栗子:
这是对标签的设置
可以使鼠标单击标签内字体产生各种效果
注意兼容问题
- IE6及更早的版本,支持<a>元素的4种状态
- IE6浏览器不支持其他元素的:hover和active
链接伪类的顺序
:link>:visited>:hover>:active
记忆方法:LVHA
说明
1. a:hover(悬停)必须放置在a:link(未访问)和a:visited(已访问)之后才生效
2. a:active(激活)必须放置在a:hover(悬停)之后才生效
3. 伪类名称对大小写不敏感
为不同的链接设置不同的LVHA
使用class进行类选择器操作:
1.4 CSS继承和层叠
CSS继承
从父元素继承部分CSS属性
这里虽然没有对<p>标签和<em>标签进行设置,但是由于
对<div>进行了样式设置,这两个标签继承了父元素的属性也改变了字体大小
继承优点:
- 父元素设置样式,子元素可以继承部分属性(例如"border"属性不可以继承)
- 减少CSS代码
继承的优先级较低,有时不能改变原有 默认样式,会忽略继承样式
CSS层叠
- 可以定义多个样式
- 不冲突时,多个样式可层叠为一个
- 冲突时,按不同样式规则优先级来应用样式
CSS选择器优先级
尝试:
现在对第二个<div>标签使用ID选择器(green)和标签选择器(red)
但是结果
说明:id选择器优先于标签选择器
同理:
对第三个<div>标签使用class选择器(blue)和标签选择器(red)
结果是
说明:class选择器优先于标签选择器
再同个理:
同时使用class选择器和ID选择器
结果是
说明:ID选择器优先class选择器
当
一个class标签内有两个标签时候
以就近原则为准,所以字体是橙色
所以三者的优先级为:id > class > 标签选择
I>C>选
CSS优先级规则
同一个样式表(同一个style)中:
-
权值相同
就近原则(距离被设置元素越近优先级越高)
-
权值不同
根据权值来判断CSS样式,哪种CSS样式权值高,就用哪种样式
权值
举个栗子:
这时通过子代选择器和标签选择器的权值对比决定使用子代选择器
举个更复杂的栗子:
经过一波权值计算,最后应该显示灰色
!important规则
- 可调整样式规则的优先级
- 添加在样式规则之后,中间用空格隔开
语法:
div{color:red !important;}
使标注的优先级最高
1.5 优先级总结
1.6 CSS样式命名
命名规范
- 采用英文字母、数字、以及“_”和“-”命名
- 以小写字母开头,不能以数字和“-”、“_”开头
- 命名形式:单字,连字符,下划线和驼峰
/*一个单词,全部小写*/
.special{...}
/*多个单词,驼峰写法,除了第一个单词,其他首字母大写*/
.mainTitle{...}
/*使用-和_连接符*/
.main_title
.main-title
- 使用有意义的命名
常用的CSS样式命名
1 页面结构
- 页头:header
- 页面主体:main
- 页尾:footer
- 内容:content/container
- 容器:container
- 导航:nav
- 侧栏:sidebar
- 栏目:column
- 页面外围控制:wrapper
- 左右中:left right center
2 导航
- 导航:nav
- 主导航:mainnav
- 子导航:subnav
- 顶导航:topnav
- 边导航:sidebar
- 左导航:leftsidebar
- 右导航:rightsidebar
- 菜单:menu
- 子菜单:submenu
- 标题:title
- 摘要:summary
3 功能
- 标志:logo
- 广告:banner
- 登陆:login
- 登陆条:loginbar
- 注册:register
- 搜索:search
- 功能区:shop
- 标题:title
注意:
id不要滥用,谨慎使用
适当使用class
js需要用id来进行操作