CSS学习笔记01

霄雨Blog

已于 2022-01-20 11:04:06 修改

阅读量675

点赞数 1

文章标签： css css3 html

于 2022-01-20 01:04:45 首次发布

本文链接：https://blog.csdn.net/weixin_41225951/article/details/122593087

版权

title: CSS01
date: 2022-01-19 20:48:40
tags: CSS Introduction

CSS简介

网页分成三部分：结构、表现、行为

结构：HTML 表现：CSS 行为： js

CSS：层叠样式表（图层）-> 网页实际上是一个多层结构，通过CSS可以为网页的每一层来设计样式，最终能看到的只是网页的最上面一层。总之，CSS可以用来设置网页中元素的样式。

CSS编写的位置

内联样式

内联样式（不推荐使用，因为样式只能对一个标签生效，如果希望影响到多个元素，必须在每一个元素中都复制一遍，当样式发生变化的时候还需要一个一个修改，不方便维护。开发时绝对不要使用内联样式）

<p style ="color:brown; font-size:20;">少小离家老大回</p>

效果如下：

少小离家老大回

内部样式表

选择器：p(…)表示给所有的p标签设置样式

将样式编写到head中的style标签里，然后通过CSS的选择器来选中元素为其设置各种样式，可以同时为多个标签设置样式，并且修改的时候只需要修改一处即可

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

<head>
<style>
    p{
    color:red;font-size:20;
    }
</style>
</head>

<body>

    <p>
        少小离家老大回
    </p>

</body>

外部样式表（最佳实践）

将CSS样式编写到一个外部的CSS文件中，用link标签来引入外部的CSS文件

在head中创建

<link rel="stylesheet" href="./style.css">

外部样式表需要通过link标签进行引入，这样意味着只要想使用这些样式的网页都可以进行引用，使得我们的样式在不同的页面之间进行复用

将我们的样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，从而加快网页加载速度，提高用户体验。（3个html同时引用了一个CSS文件，如果A先加载过，浏览器会自动缓存，BC会从浏览器直接加载，加快速度。）

CSS的基本语法简介

style标签内部不属于html，style内部需要遵守CSS的编写规范，不能出现html标签。

注释

/*注释*/

ctrl+/

CSS的基本语法分成两部分

选择器+声明块

选择器

通过选择器可以选中页面的指定元素，比如p{}，即选中页面中所有的p元素。

声明块

通过声明指定要为元素设置的样式。

声明由一个一个声明组织，名值对结构，一个样式名对应一个样式值，**：连接，；**结尾。

选择器

常用选择器

元素选择器

作用：根据标签名来选择指定的元素

语法：标签名{}

eg：p{} div{} h1{}

缺点：不能只给一两个地方设置样式

id选择器

作用：根据id属性值选定一个元素

语法：#id属性值{}

eg: #id{}

缺点：id不能重复，如果同时将两个地方设置就不太行

class选择器（主要使用）

与id类似，不同的是class可以重复

作用：根据元素的class属性值选中一组元素

语法：.class{}

eg：.class属性值{}

特点：可以同时为一个元素指定多个class名，用空格隔开

通配选择器

作用：选中页面中所有元素

语法：*

复合选择器

交集选择器

作用：选中同时复合多个条件的选择器

语法：选择器1选择器2选择器3

eg. 将class为red的div来设置 div.red{}

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

一般不会有div#id因为id一般可以直接确定是哪个

选择器分组（并集选择器）

作用：同时选择多个选择器对应的元素

语法：选择器1，选择器2

eg. h1,.blue{color:blue;} #h1{},.p1{},span{},div.red{}.

关系（父子）选择器

网页中不同元素的关系：

父元素：直接包含子元素的元素叫做父元素
子元素：直接被父元素包含的元素叫做子元素
祖先元素：直接或间接包含子元素的元素叫做祖先元素，父元素也算祖先元素
后代元素：直接或间接被祖先元素包含的元素叫做后代，子元素也算后代元素
兄弟元素：同一个父元素

子元素选择器

作用：选中指定父元素的指定子元素

语法：父元素>子元素

后代元素选择器

作用：选中指定元素内的所有后代

样式：祖先后代

可以连用比如父元素>子元素>子元素祖先后代后代

兄弟选择器

作用：选择下一个兄弟

样式：前+后

作用：选择下面所有兄弟

样式：前~后

属性选择器

作用：根据元素属性选择

[属性名]选择含有指定属性的元素

[title]{

color:chocolate;

}

[属性名=属性值]选择含有指定属性值的元素

[title=abc]{

color:blue;

}

[属性名^=属性值]选择属性值开头为某一值的元素

[title^=a]{

color:green;

}

[属性名$=属性值]选择属性值结尾为某一值的元素

[title$=f]{

color:brown;

}

[属性值*=属性名]选择属性值任一位置含有某一值的元素

[title*=b]{

color: purple_heart;

}

伪类（pseudo-classes）选择器

<ul>
        <li>first</li>
        <li>second</li>
        <li>third</li>
        <li>fourth</li>
        <li>fifth</li>
    </ul>

如果我们想让第一个li设置成红色

- 如果设置class会出现问题，非动态，当第一个li被另外一个li替换到后面变成第二个，第二个就会变红

- 伪类用来描述一个元素的特殊状态->比如第一个元素，鼠标点击的元素，鼠标移入的元素

伪类：一个冒号开头

所有子元素排序

是所有子元素，不只是<li>标签，如果<li>前面还有别的标签比如span，那第一个<li>将不能算作是第一个子元素。

: first-child(第一个子元素)

ul>li:first-child{}

:last-child(最后一个子元素)

ul>li:last-child{}

:nth-child(n){}

ul>li:nth-child(3){}
/*特殊值：n 第n个 n的范围0到正无穷
		2n或even 表示选中偶数位元素
		2n+1 或 odd 表示选中奇数位元素*/

同类型元素进行排序

只算同类型元素的排序，只是<li>标签，如果<li>前面还有别的标签比如span，那第一个<li>将还算是第一个子元素。

:first-of-type{}第一个子元素

ul>li:first-of-type{}

:last-of-type{}最后一个子元素

ul>li:last-of-type{}

:nth-of-type(){}任意一个子元素

ul>li:nth-of-type(){}

否定伪类

:not 将符合条件的元素从选择器中驱逐。

除了第三个，剩下的都是红色

ul>li:not(:nth-child(3)){
	color:red;
}

只有一个子元素（所有元素都算）

:only-child

选择的是父元素中只有一个子元素，而且只有唯一的子元素。

比如：以下只会改变第一个div里的元素样式，因为第一个div只有一个子元素

div p:only-child{
    color:green;
}
<div>
	<p>
		123
	</p>
</div>
<div>
	<p>
		123456
	</p>
	<p>
		456789
	</p>
</div>
<div>
	<a pref="http://www.baidu.com">
	</a>
<div>

只有一个子元素（只算一种类型中的）

:only-of-type

Selects the only element of its type within another。

比如：以下第一个div和第二个div都会改变，因为它只算p是否有一个。

div p:only-of-type{
    color:green
}
<div>
	<a pref="http://www.baidu.com">
	<p>lala</p>
</div>
<div>
	<p>lala</p>
</div>

空元素

:empty{}

比如,会选中第一个div

div:empty{}

<div></div>
<div>
	<p>lala</p>
</div>

超链接的伪类

a:link 没访问过的链接（正常的链接）

a:visited 访问过的链接

visited表示访问过的网站，由于隐私的原因，只能修改颜色，大小之类的都不能修改。

a:visited{
color:red;
}

a:link{
color:purple;
}

:hover 用来表示鼠标移入的状态

a:hover{
color:red;
}

:active 用来表示鼠标点击的状态

a:active{
color:purple;
}

伪元素

表示页面中一些特殊的并不真实存在的元素，也就是特殊的位置

::first-letter第一个字母

p::first-letter{
color:red;
}

::first-line第一行

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

::selection

p::selection{
background-color:greenyellow;
}

::before起始位置很重要，比如quote自动加上的引号这些都是通过before，after实现的。

结合content属性来使用

div::before{

content:"《";

color:red;

}

::after结束位置

div::after{

content:"》"

color:red;

}

 h1::before{
            content:"《";
            color:violet;
        }
        h1::after{
            content:"》";
            color:violet;
        }

餐厅选择器练习

网址：http://flukeout.github.io/

1 plate{} 元素选择器
2 bento{} 元素选择器
3 #fancy{} id选择器
4 plate apple{} 后代选择器
5 #fancy pickle{}复合选择器
6 .small{} 类选择器
7 orange.small{} 交集选择器
8 bento orange.small{} 复合选择器
9 plate,bento{} 并集选择器，选择器分组
10 *{} 选择所有，通配选择器
11 plate *{} 选择盘子里的所有 通配选择器
12 plate+apple{} 兄弟选择器,选择下一个
13 plate~blento{} 兄弟选择器，选择下面的全部
14 plate>child{} 子元素选择器
15 plate orange:first-child{} 伪类选择器，第一个元素
16 plate :only-child {} 伪类选择器，只有一个子元素，在所有里面计数
17 plate .small:last-child,pickle:last-child{} 伪类选择器，last-child
18 plate:nth-child(3){} 伪类选择器，第几个
19 bento:nth-last-child(3){} 伪类选择器，选择倒着数的第几个
20 apple:first-of-type{} 伪类选择器，只选择apple这种类型的第一个
21 plate:nth-child(even){} 伪类选择器，选择第偶数个
22 plate:nth-child(2n+3){} 伪类选择器，选择第2n+3个
23 plate apple:only-of-type{} 伪类选择器，选择只有一个子元素，在apple里去计数
24 orange:last-of-type,apple:last-child{} 伪类选择器，选择最后一个元素，last-of-type是该类型最后一个，last-child是所有类型中最后一个
25 bento:empty{}伪类选择器，空元素
26 apple:not(.small){} 伪类选择器，not排除
27 [for]{} 属性选择器，选择属性
28 plate[for]{} 属性选择器，选择有属性for的某一元素
29 [for=Vitaly]{} 属性选择器，属性+属性值
30 [for^=Sa]{} 属性选择器，选择前几个字母相同元素
31 [for$=ato]{}属性选择器，选择后几个字母相同元素
32 [for*=obb]{} 属性选择器，选择任意位置几个字母相同元素

霄雨Blog

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记01

title: CSS01date: 2022-01-19 20:48:40tags: CSS IntroductionCSS简介网页分成三部分：结构、表现、行为结构：HTML 表现：CSS 行为： jsCSS：层叠样式表（图层）-> 网页实际上是一个多层结构，通过CSS可以为网页的每一层来设计样式，最终能看到的只是网页的最上面一层。总之，CSS可以用来设置网页中元素的样式。CSS编写的位置内联样式内联样式（不推荐使用，因为样式只能对一个标签生效，如果希望影响到多个元素，必须在.
复制链接

扫一扫