2021-11-03 23:08 海南大学 Java

关注

2、CSS层叠样式表

1、CSS简介

层叠样式表：表现

网页实际上是一个多层的结构，通过CSS可以分别为网页的每一层来设置样式，而最终我们看到的只是网页的最上边一层，CSS用来设置网页中元素的样式

添加样式的三种方式

第一种方式（内联样式，行内样式）

在标签内部通过style属性来设置元素的样式

但是只能对一个标签生效，需要改变样式时需要一个一个的修改，不能复用

<p style="color: red; font-size: 60px;">今天天气真不错！</p>

第二种方式（内部样式表）

将样式编写到head中的style标签里

然后通过CSS的选择器来选中元素并为其设置各种样式

可以同时为多个标签设置样式，并且修改时只需修改一处即可全部应用

内部样式表更加方便对样式进行复用

但内部样式表只能对一个网页起作用，不能跨页面进行复用

<head>
	<style>
        p{
            color:green;
            font-size:50px;
        }
    </style>	
</head>

2、语法

选择器，选中指定元素

声明块，为选中指定元素设置样式，名值对形式color:red;

p{
	color:red;
	font-size:40px;
}
/*注释 */

3、常用选择器

元素选择器：根据标签名选中指定元素

p{
	color:red;
}
h1{
	color:green;
}

id选择器：根据元素的id属性值选中一个元素

<p id="username">张三</p>

#id值{}

#username{
	color:red;
}

类选择器：根据class属性值选中一组元素

class是一个标签的属性，和id类似，class可以重复使用

<h1 class="label label2">我是标题</h1>

.label{
	font-size:20px;
}
.label2{
	color:red;
}

通配选择器：选中页面中的所有元素

*{
	color:red;
}

4、复合选择器

<body>
    <div class="red">我是div</div>

    <p class="red">我是p元素</p>

    <div class="red2 a b c">我是div2</div>

    <h1>标题</h1>

    <span>哈哈</span>

</body>

将class为red的元素设置为红色

.red{
	color:red;
}

将class为red的div字体大小设置为30px

交集选择器：选中同时复合多个条件的元素

语法：选择器1选择器2...选择器n{}

交集选择器中如果有元素选择器，必须使用元素选择器开头

div.red{
	font-size:30px
}

.a.b.c{
    color:blue;
}

div#box1{
    
}

选择器分组（并集选择器）：同时选择多个选择器对应的元素

语法：选择器1，选择器2，选择器3，...选择器n

#b1,.p1,h1,span,div.red{}

h1,span{
	color:green;
}

5、关系选择器

父元素：直接包含子元素的元素叫做父元素

子元素：直接被父元素包含的元素是子元素

祖先元素：直接或间接包含后代元素的元素叫做祖先元素，一个元素的父元素也是它的祖先元素

后代元素：直接或间接被祖先元素包含的元素叫做后代元素，子元素也是后代元素

兄弟元素：拥有相同父元素的元素是兄弟元素

<body>
    <div class="box">
        我是一个div
		<span>kkkk</span>
        <p>
            我是div中的p元素
            <span>我是p元素中的span</span>
        </p>
		<span>jjjjj</span>
        <div>vuyk</div>
        <span>我是div中的span元素</span>
        <span>我是div中的span元素</span>
        <span>我是div中的span元素</span>
        <span>我是div中的span元素</span>
    </div>

    <span>
        我是div外的span
    </span>

</body>

给div的子元素span（直接包含的span）设置字体颜色

父元素>子元素

div.box>span{
	color:red;
}

指定元素内的后代元素

祖先后代

div span{
	color:skyblue;
}

div>p>span{
    color:orange;
}

选择下一个兄弟元素

前一个+下一个

p+span{
	color:green;
}

选择下边所有的兄弟元素

兄~弟

p~span{
	color:purple;
}

6、属性选择器

<body>
    <p title="abc">少小离家老大回</p>
    <p title="abcdef">乡音无改鬓毛衰</p>
    <p title="helloabc">儿童相见不相识</p>
    <p>笑问客从何处来</p>
    <p>秋水共长天一色</p>
    <p>落霞与孤鹜齐飞</p>
</body>

p[title]{}	/*选择含有title属性的元素*/
p[title=abc]{}	/*选择含有title="abc"属性值的元素*/
p[title^=abc]{}	/*选择以title值为abc开头的元素*/
p[title$=$abc]{}	/*选择以title值为abc结尾的元素*/
p[title*=e]{}		/*选择title值中含有e的元素*/

7、伪类选择器

伪类：第一个子元素、被点击的元素、鼠标移入的元素.......

:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(n) 选中第n个子元素
	n 第n个（0~正无穷）
	2n或even 偶数位的子元素
	2n+1或odd 奇数位的子元素

以上这些伪类都是根据所有的子元素进行排序

:first-of-type
:last-of-type
:nth-of-type(n)

这几个和上面的功能类似，但是是在同类型元素中进行排序

:not() 否定伪类

将符合条件的元素从选择器中去除

<body>
    <ul>
        <span>我是一个span</span>
        <li>第〇个</li>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
    </ul>
</body>

ul>li:first-child{		ul中的第一个li
	color:red;
}

ul>li:last-child{		ul中的最后一个li
    color:red;
}

ul>li:nth-child(2n+1){		ul中的奇数位li
    color:red;
}

ul>li:nth-child(even){		ul中的偶数位li
    color:red;
}

ul>li:first-of-type{		ul中的第一个li
    color:red;
}

ul>li:not(:nth-of-type(3)){		ul中除了第三个li
	color:yellowgreen;
}

8、a元素的伪类

a:link{			没访问过的链接（正常的链接）
	color:red;
}

a:visited{		访问过的链接，visited伪类只能修改链接的颜色
    color:orange;
}

a:hover{		鼠标移入的状态
    color:aqua;
    font-size:50px;
}

a:active{		鼠标点击
    color:yellowgreen;
}

<a href="https://www.baidu.com">链接</a>

9、伪元素选择器

伪元素：如第一个字母、第一行、选中的内容....

::first-letter	第一个字母
::first-line 第一行
::selection 选中的内容
::before 元素的开始
::after 元素的最后
	before和after必须结合content属性来使用

p::first-letter{
	font-size:50px;
}

p::first-line{
    background-color:greenyellow;
}

div::before{
    content:'abc';
    color:red;
}

div::after{
    content:'haha';
    color:blue;
}

div::before{
    content:'『';
}
div::after{
    content: '』';
}

    <div>Hello Hello How are you</div>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque velit modi veniam nisi veritatis tempore laborum nemo ipsa itaque optio. Id odit consequatur mollitia excepturi, minus saepe nostrum vel porro.
    </p>

10、样式的继承

为元素设置的样式也会应用到它的后代元素上

背景相关的、布局相关的样式都不会被继承

p{
	color:red;
	background-color:orange;
}
div{
	color:yellowgreen;
}

<body>
    <p>
        我是一个p元素
        <span>我是p元素中的span</span>
    </p>

    <span>我是p元素外的span</span>

    <div>
        我是div
        <span>
            我是div中的span
            <em>我是span中的em</em>
        </span>
    </div>
</body>

11、选择器的权重

样式冲突：通过不同的选择器，选中相同的元素，为相同的样式设置不同的值时，就发生了样式冲突

由选择器的权重（优先级）决定应用哪个样式

选择器	优先级
内联样式	1，0，0，0
id选择器	0，1，0，0
类和伪类选择器	0，0，1，0
元素选择器	0，0，0，1
通配选择器	0，0，0，0
继承的样式	没有优先级

比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）

选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器

如果优先级计算后相同，此时则优先使用靠下的样式

在某一个样式的后边添加！important，该样式会获取到最高的优先级，甚至超过内联样式，但在开发中要慎用

12、单位

长度单位

像素
- 屏幕（显示器）实际上是由一个一个的小点点构成的
- 不同屏幕的像素大小不同，像素越小的屏幕显示的效果越清晰
- 所以同样的200px在不同设备下显示效果不一样
百分比
- 将属性值设置为相对于其父元素属性的百分比
- 设置百分比可以使子元素跟随父元素的改变而改变
em
- em是相对于元素的字体大小来计算的
- 1em=1font-size
- em会根据字体大小的改变而改变
rem
- rem是相对于根元素的字体大小来计算

13、颜色

颜色单位

直接使用颜色：red、orange、yellow、green、blue
RGB值
- 通过三种不同浓度来调配出不同的颜色
- R red，G green，B blue
- 每一种颜色的范围在0-255（0%-100%）之间
- 语法：RGB(红色，绿色，蓝色)
RGBA
- RGB(红色，绿色，蓝色，A)
- A表示不透明度：1完全不透明，0完全透明，.5半透明
十六进制的RGB值
- 语法：#红色绿色蓝色
- 颜色浓度00-ff
- 颜色两位两位重复可以简写#aabbcc-->#abc
HSL值 HSLA值
- H 色相（0-360）
- S 饱和度，颜色的浓度0%-100%
- L 亮度，颜色的亮度0%-100%