CSS的三种使用方式
1. 行内样式:在某个特定的元素当中采用style属性。只对当前元素有效
2. 内嵌样式:在页面的head部分采用<style>标 签。范围是针对当前文件
3. 外链样式:将CSS样式写在单独的CSS文文件件当中,需要用到的地方引入该外部样式表文件 #
1,外链样式 【head部分 将CSS样式写在单独的CSS文文件件当中,需要用到的地方引入该外部样式表文件】
<link rel="stylesheet" type="text/css" href="../css/base.css">
2.内嵌样式 【head部分采用<style>标 签。范围是针对当前文件】
<style>
p {color: forestgreen; font-size: small;}
</style>
3.行内样式【在某个特定的元素当中采用style属属性性。只对当前元素有效】
<p style="color: blueviolet; font-size: x-large;">段落2</p >
link 元素用于链接外部css样式表等其他相关外部资源。
link
其中link中包括如下属性。
href:指明外部资源文件的路径,即告诉浏览器外部资源的位置
hreflang:说明外部资源使用的语言
media:说明外部资源用于哪种设备
rel:必填,表明当前文档和外部资源的关系
sizes:指定图标的大小,只对属性rel="icon"生效
type:说明外部资源的 MIME 类型,如text/css、image/x-icon
rel核心属性的参数值如下,也可参考 MDN。alternate:链接到文档的替代版本
archives:链接到文档集或历史数据
author:提供指向文档作者的链接
bookmark:定义文档在收藏夹中显示的书签图标
canonical:指明网站的规范版本
dns-prefetch:指定浏览器预先执行目标资源的DNS解析
external:链接到外部,即告知搜索引擎,此链接不是本站链接
first:链接到集合中的首个文档
help:链接帮助信息
icon:定义网站或网页在浏览器标题栏中的图标
license:链接到文档的版权信息
last:链接到集合中的末个文档
nofollow:指定文档不被搜索引擎跟踪,即某些页面不被爬虫抓取
next:记录文档的下一页(浏览器可以提前加载此页)
noreferrer:可以阻止浏览器发送访问来源信息
preload:对资源进行预加载
pingback:提供处理当前文档的pingback服务器地址
prefetch:对资源进行预加载并缓存,通常preload用于加载当前页面的资源,而prefetch用于加载将来页面可能需要的资源
preconnect:预先连接到目标资源的地址
prev:记录文档的下一页
search:链接到文档的搜索工具
stylesheet:指定作为样式表的外部资源
sidebar:指定浏览器边栏中显示的文档
tag:指定当前文档使用的标签、关键词
up:指向一个文档,此文档提供此网页的上下文关系
1、标签选择器
结构: 标签名{css属性名:属性值}
作用:通过标签名,找到页面中所有的这类标签,设置样式
注意:1.标签选择器选择的是一类标签,而不是单独的一个
2.标签选择器无论嵌套关系有多深,都能够找到对应的标签
标签选择器作用; 可以选取所有的指定标签的元素
2、类选择器
结构: .类名{css属性名:属性值;}
作用:通过类名,找到页面中所有的带有这个类名的标签,设置样式
注意:1.所有的标签上都有class属性,class属性的属性值成为类名(类似于起了一个名)
2.类名可以由数字,字母,下划线,中划线组成,但是不能以数字开头或者中划线开头
3.一个标签中可以同时有多个类名,类名之间用空格隔开
4.类名可以重复,一个类选择器可以同时选中多个标
类选择器 作用 ;可以选取包含该class 类选择器 属性值的所有元素
3.id选择器
结构: #id属性值{css属性名:属性值;}
作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式
注意:1.所有的标签上都有id属性
2.id属性值类似于身份证号码,在一个页面中是唯一的,不可重复的
3.一个标签上只能有一个id属性值
4.一个id选择器只能选中一个标签
区别:
class类名和id属性值之间的区别
class类名相当于姓名,可以重复,一个标签中可以有多个class类名
id属性值相当于身份证号码,不可重复,一个标签里面只能有一个ID属性值
类选择器和id选择器之间的区别
类选择器以.开头
id选择器以#开头
实际开发中的情况
类选择器用的最多
id一般配合js来使用,除非情况特殊,一般不要给id设置样式
实际开发中会遇到冗余代码的抽取
ID选择器作用 ; 选取ID属性值等于当前值的元素,因为ID属性的唯一性,ID选择器只能选择到一个元素
例如 #to_ 163 {color: blue;}
4、通配符选择器
结构: *{css属性名:属性值}
作用:找到页面中所有的标签,然后设置样式
注意:1.开发中应用极少,只有在特殊的情况下才会使用
2.在小页面中可能会用于去除页面中默认的margin和padding
复合选择器有两种;①交集选择器 作用;选择同时满足多个选择器要求的元素,多个基础选择器连续的写在一起,如果有标签选择器,需要写在第一个 ②并集选择器:选择满足任意一个选择器的元素,多个基础选择器用逗号隔开 例如:a.c3 {color:crimson;}
1、交集选择器
语法: 选择器1选择器2{css样式}
作用:选中页面中同时满足过个选择器的标签 紧挨着的
结果:找到标签中既能被选择器1又能被选择器2选中的标签,设置样式
注意:之间没有任何东西隔开,紧挨着的
交集选择器中如果有标签选择器,标签选择器必须放在前面
2、并集选择器
语法: 选择器1,选择器2{css样式}
并集选择器:同时选择多组标签,设置相同的样式
结果:找到选择器1和选择器2选中的标签,设置样式
注意: 选择器与选择器之间用,隔开
可以是基础选择器或者复合选择器
每组选择器通常一行写一个,提高代码的可读性
关系选择器
1.子代选择器 只会选择亲儿子,> 语法:父元素>子元素{}
作用:通过指定的父元素找到指定的子元素 <style>
p > span{color: blueviolet;}
</style>
</head>
2 后代选择器 作用 ;选择所有的子孙后代,空格表示后代关系
作用:通过指定的祖先元素找到指定的子元素
语法:父元素 子元素{}(父元素和子元素中间空格) <style>
p span{color: blueviolet;}
</style>
</head>
<body>
<p>这个也会<span>后代选择器</span></p >