CSS的引入方式以及复合选择器

最新推荐文章于 2024-04-13 14:03:08 发布

qq_50636169

最新推荐文章于 2024-04-13 14:03:08 发布

阅读量64

点赞数 1

本文链接：https://blog.csdn.net/qq_50636169/article/details/118764658

版权

CSS的引入方式

css按照书写的位置划分有三种样式表，分别为行内样式表（行内式）、内部样式表（嵌入式）、外部样式表（链接式）。
1.内部样式表
内部样式表是写到html页面内部的，将所有css码抽取出来，单独放到一个<style>标签中。

<style>
    div {
    color: red;
    font-size: 12px;
    }
 </style>

理论上<style>标签可以放在html文档的任何地方，但一般会放在文档的<head>标签中。
可以控制整个页面的元素样式的设置
并没有实现结构与样式的完全分离

2.行内样式表
行内样式表是在元素标签内部的style属性中设定css样式，适合于修改简单样式。

< div style="color: red; font-size: 12px;">...</div>

style是标签的属性
控制当前标签设置样式

3.外部样式表
外部样式表适用于元素标签较多，其核心是样式单独写到css文件中再把css文件写入html文件中。
步骤为：
1.新建一个后缀名为.css的文件，把有关的css码放入该文件中
2.在html页面中，使用<link>标签引入这个文件


< link rel="stylesheet" href="css文件:>
直接在`<head>`中写，不需要另写`<style>`

CSS复合选择器

复合选择器是建立在基础选择器之上的，由两个或两个以上的基础选择器通过不同方式组合而成的，可以更准确、更高效地选择目标元素，常用的复合选择器包括后代选择器、子选择器、并集选择器、伪类选择器等
1.后代选择器
后代选择器又称为包含选择器，可以选择父元素里面的子元素
把外层标签写在前面，内层标签写在里面，中间用空格分隔，当发生嵌套时，内层标签就是外层标签的后代

元素1 元素2  {样式声明}

元素中间要用空格隔开
元素可以是任意基础选择器
元素2可以是元素1的儿子也可以是孙子等，只要是元素1的后代就行
最终选择的是子级元素2

2.子选择器
只能选择某元素最近一级的子元素，即亲儿子元素

元素1>元素2{样式声明}

元素1里面所有直接后代（子元素）元素2

元素2必须是亲儿子
元素之间用大于号隔开
最终选择的是子级元素2

3.并集选择器
并集选择器可以选择多组标签，同时为他们定义相同的样式，常用于集体声明，并且任何形式的选择器都可以作为并集选择器的一部分

元素1，元素2 {样式声明}

元素之间用“，”隔开，且上述语法表示选择元素1和元素2

4.伪类选择器
用于向某些选择器添加特殊效果，伪类选择器有很多，这里主要介绍链接伪类选择器和focus伪类选择器，用“：”分隔
链接伪类选择器

a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接（鼠标按下未弹起的链接）
注意：一定要按照a:link 、a:visited、a:hover、a:active的顺序写
因为a链接在浏览器中具有默认样式，所以在实际工作中都需要给链接单独指定样式

实际工作的写法
a {color: red:
}
a:hover {
    color: red;
    }

focus伪类选择器
用于获取选择焦点的表单元素，焦点就是光标，一般情况下<input>类表单元素才能获取，因此这个选择器主要针对表单元素


input:focus {
            background-color: red;
         }

qq_50636169

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
CSS的引入方式以及复合选择器

CSS的引入方式css按照书写的位置划分有三种样式表，分别为行内样式表（行内式）、内部样式表（嵌入式）、外部样式表（链接式）。1.内部样式表内部样式表是写到html页面内部的，将所有css码抽取出来，单独放到一个<style>标签中。<style> div { color: red; font-size: 12px; } </style>理论上<style>标签可以放在html文档的任何地方，但一般会放在文档的&
复制链接

扫一扫