CSS

发布时间：2023-09-06 02:12责任编辑：沈小雨关键词：CSS

一.CSS选择器

1.CSS语法

h1(选择器找标签) {color:red;font_size:14px;}

2.CSS style的导入方式

(1)直接将样式写在标签内部的style属性

<div style="color: yellow">我是div标签</div>

(2)在head标签中写style标签

<head>
 ???<style>
 ???????p{
 ???????????color: red;
 ???????}
 ???</style>
</head>

<body>

<p>我是p标签</p>
<script></script>
</body>

(3)将样式写在单独的CSS文件中,通过link标签的href属性导入(主要项目中多用)

html文件:

<head>
 ???<link rel="stylesheet" href="css ?href属性.css">
</head>

<body>
<span>我是span标签</span>
</body>

css文件:

span{
 ???color: aqua;
}

3.CSS选择器

(1)基本选择器

①元素选择器: p

例如:是将所有的p标签全部改成一个颜色

<head>
 ???<style>
 ???????p{
 ???????????color: lawngreen;
 ???????}
 ???</style>
</head>

<body>
<p>我是p标签1</p>
<p>我是p标签2</p>
<p>我是P标签3</p>
<p>我是P标签4</p>
<p>我是p标签5</p>
</body>

②ID选择器: #i1

例如:是将所有的id值为i1的标签全部变成一个颜色

<head>
 ???<style>
 ???????#i1{
 ???????????color: red;
 ???????}
 ???</style>
</head>
<body>
<div id="i1">我是div标签1</div>
<div id="i1">我是div标签2</div>
<div id="i1">我是div标签3</div>
<div>我是div标签4</div>
<div>我是div标签5</div>
</body>

③类选择器: ".c1" class类中用空格隔开/查看整个文档中的cls的值是不是那个值,如果是就改变颜色

例如:是将所有的class为c1的颜色全部变成一个颜色

<head>
 ???<style>
 ???????.c1{
 ???????????color: red;
 ???????}
 ???</style>
</head>
<body>
<p class="c1">我是p标签1</p>
<p>我是p标签2</p>
<div class="c1">我是div标签1</div>
<div>我是div标签2</div>
</body>

(2)组合选择器

①后代选择器

例如:div里面所有的span标签的颜色变成一个颜色

<head>
 ???<style>
 ???????div span {
 ???????????color:red;
 ???????}
 ???</style>
</head>
<body>
<div>
 ???<div>
 ???????<span>我是span标签1</span>
 ???????<p>
 ???????????<span>我是span标签2</span>
 ???????</p>
 ???</div>
</div>
</body>

②儿子选择器

例如:选择所有父级是div元素的span元素(标签)

<head>
 ???<style>
 ???????div>span
 ???????{
 ???????????color: lawngreen;
 ???????}
 ???</style>
</head>
<body>
<div>
 ???<div>
 ???????<span>我是span标签1</span>
 ???????<p>我是p标签</p>
 ???</div>
 ???<span>我是span标签2</span>
</div>
</body>

③毗邻选择器

例如:选择所有紧接着div元素之后的p元素,并改变样式

<head>
 ???<style>
 ???????div+p{
 ???????????color: yellow;
 ???????}
 ???</style>
</head>
<body>
<div>
 ???<div>我是div标签1</div>
 ???<p>我是p标签1</p>
</div>
<p>我是p标签2</p>
</body>

④弟弟选择器

例如:是将p标签下面的所有兄弟span标签找到并改变样式

<head>
 ???<style>
 ???????p~span{
 ???????????color: aqua;
 ???????}
 ???</style>
</head>
<body>
<p>这是p标签1</p>
<span>这是span标签1</span>
<span>这是span标签2</span>
<div>这是div标签</div>
<span>这是span标签3</span>
</body>

(3)属性选择器

例如1:光找有s14这个属性的元素,并为其改变颜色

<head>
 ???<style>
 ???????[s14]{
 ???????????color: yellow;
 ???????}
 ???</style>
</head>
<body>
<div s14="123">这是div标签1</div>
<div>这是div标签2</div>
<p s14="456">这是p标签</p>
</body>

例如2:找div元素下有s14属性的,并改变样式

<head>
 ???<style>
 ???????div[s14]{
 ???????????color: yellow;
 ???????}
 ???</style>
</head>
<body>
<div s14="123">这是div标签1</div>
<div>这是div标签2</div>
<p s14="456">这是p标签</p>
</body>

(4)分组选择器

例如:找到父级是div元素的p标签和所有紧接着div标签的p标签的元素,并改变样式

<head>
 ???<style>
 ???????div+p,div>p{
 ???????????color: red;
 ???????}
 ???</style>
</head>
<body>
<div>我是div标签</div>
<p>我是p标签1</p>
<div>
 ???<p>我是p标签2</p>
</div>
</body>

(5)嵌套选择器

例如:找d1后代中有类是c1样式的span的标签,并改变样式

<head>
 ???<style>
 ???????#d1 span.c1{
 ???????????color: red;
 ???????}
 ???</style>
</head>
<body>
<div id="d1">
 ???<div id="d2">
 ???????<span>这是span1</span>
 ???????<p>
 ???????????<span class = "c1">这是span2</span>
 ???????</p>
 ???</div>
</div>
</body>

(6)伪类选择器

①未访问的链接(设置没有访问过网址的颜色)

<head>
 ???<style>
 ???????a:link{
 ???????????color:red;
 ???????}
 ???</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.luffycity.com">路飞学城</a>
<a href="https://www.taobao.com">淘宝</a>
</body>

②已访问的链接(设置已经访问过网址的颜色)

<head>
 ???<style>
 ???????a:visited{
 ???????????color: yellow;
 ???????}
 ???</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.luffycity.com">路飞学城</a>
<a href="https://www.taobao.com">淘宝</a>
</body>

③鼠标移动到链接上的颜色 (常用)

<head>
 ???<style>
 ???????a:hover{
 ???????????color: red;
 ???????}
 ???</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.luffycity.com">路飞学城</a>
<a href="https://www.taobao.com">淘宝</a>
</body>

④选定的链接(鼠标点住网址的那一时刻的时间的颜色)

<head>
 ???<style>
 ???????a:active{
 ???????????color: blue;
 ???????}
 ???</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.luffycity.com">路飞学城</a>
<a href="https://www.taobao.com">淘宝</a>
</body>

⑤input输入框获取焦点的样式

<head>
 ???<style>
 ???????input:focus{
 ???????????outline: none;
 ???????????background-color: yellow;
 ???????}
 ???</style>
</head>
<body>
<label for="i1">用户名:</label>
<input id="i1" type="text">
</body>

(7)伪元素选择器 (before和after多用于清除浮动)

①first-letter 常用的给首字母设置特殊样式

<head>
 ???<style>
 ???????p:first-letter{
 ???????????font-size: 48px; ???(字体大小)
 ???????????color:red ??????????(字体颜色)
 ???????}
 ???</style>
</head>
<body>
<p>我是一个p标签</p>
</body>

②before 在标签之前插入内容

<head>
 ???<style>
 ???????p:before{
 ???????????content:"*"; ??????(添加的内容)
 ???????????color: darkred; ???(添加内容的字体颜色)
 ???????}
 ???</style>
</head>
<body>
<p>我是一个p标签</p>
</body>

③after 在标签之后插入内容

<head>
 ???<style>
 ???????p:after{
 ???????????content:"*"; ???(添加的内容)
 ???????????color: red; ????(添加内容的字体颜色)
 ???????}
 ???</style>
</head>
<body>
<p>我是一个p标签</p>
</body>

4.CSS选择器的优先级

(1)选择器相同 (最下面的会生效,中间存在覆盖的问题)

<head>
 ???<style>
 ???????p{
 ???????????color: red;
 ???????}
 ???????p{
 ???????????color: blue;
 ???????}
 ???</style>
</head>
<body>
<p>我是p标签1</p>
<p>我是p标签2</p> ????====>展现出来的是蓝色
</body>

(2)选择器不同 (不同的选择器优先级不一样)

例子一:打印出来的结果是黄色的(因为内联样式大于id选择大于类选择器大于元素选择器)