css_day_001

一、简介

1. 网页的组成

结构（html）
表现（css）
行为（JavaScript）

2. css（层叠样式表）

网页实际上是一个多层的结构，通过css可以分别为网页的每一层来设置样式，而最终我们能看到的知识网页的最上边一层。

（1）作用：用来设置网页中元素的样式。

（2）使用方式：

第一种方式（内联样式，行内样式）：在标签内部通过style属性来设置元素的样式。
- 缺点：
  - 使用内联样式，样式只能对一个标签生效。
  - 如果希望影响到多个元素，则必须在每一个元素中都复制一遍。
  - 当样式发生变化时，我们必须要一个一个的修改，非常的不方便。
- 注意：开发时绝对不要使用内联样式。

<p style="color: red; font-size: 60px;">
    少小离家老大回，乡音无改鬓毛衰。
</p>

第二种方式（内部样式表）：将样式编写到head中的style标签里，然后通过css的选择器来选中元素并为其设置各种样式。
- 优点：
  - 可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用。
  - 内部样式表更加方便对样式进行复用。
- 缺点：
  - 内部样式表只能对一个网页起作用，它里面的样式不能跨页面进行复用。

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

第三种方式（外部样式表）：可以将css样式编写到一个外部的css文件中，然后通过link标签来引入外部的css文件。
- 优点：
  - 外部样式表需要通过link标签进行引入，这意味着想要使用这些样式的网页都可以对其进行引用，使样式可以在不同页面之间进行复用。
  - 将样式编写到外部的css文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户体验。

<head>
    <link rel="stylesheet" href="css文件路径">
</head>

p{
    color: green;
    font-size: 50px;
}

二、css语法

1. 注释

（1）说明：css中的注释内容会自动被浏览器所忽略。

/*

*/

2. css基本语法

2.1 选择器

（1）说明：通过选择器可以选中页面中的指定元素。

p {
    
}

2.2 声明块

（1）说明：通过声明块来指定要为元素设置的样式。

声明块由一个一个的声明组成。
声明是一个明值对结构。
- 明值对结构：一个样式名对应一个样式值，名和值之间用:连接，以;结尾。

color: red;
font-size: 40px;

3. 常用选择器

3.1 元素选择器

（1）作用：根据标签名来选中指定的元素。

（2）语法：

标签名 {}

（3）例子：

p {
    
}

h1 {
    
}

3.2 id选择器

（1）作用：根据元素的id属性值选中一个元素。

（2）语法：

#id属性值{}

（3）例子：

#red {
    color: red;
}

<p id="red">
    少小离家老大回
</p>

3.3 类（class）选择器

（1）说明：class是一个标签的属性，它和id类似，不同的是class可以重复使用。我们可以通过class属性来为元素分组。

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

（3）语法：

.class 属性值

（4）例子：

.blue {
    color: bule;
}

<p class="blue">
    落霞与孤鹜齐飞
</p>

<p class="blue">
    秋水共长天一色
</p>

可以为一个元素指定多个class属性。

3.4 通配选择器

（1）作用：选中页面中的所有元素。

（2）语法：

* {
    
}

3.5 复合选择器

3.5.1 交集选择器

（1）作用：选中同时复合多个条件的元素。

（2）语法：

选择器1 选择器2 选择器3 选择器4 ··· 选择器n {
    
}

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

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

（1）作用：同时选择多个选择器对应的元素。

（2）语法：

选择器1, 选择器2, 选择器3, 选择器4, ···, 选择器n {
    
}

3.6 关系选择器

（1）父元素：直接包含子元素的元素叫做父元素。

（2）子元素：直接被父元素包含的元素是子元素。

（3）祖先元素：直接或间接包含后代的元素的元素叫做祖先元素。

一个元素的父元素也是它的祖先元素。

（4）后代元素：直接或间接被祖先元素包含的元素叫后代元素。

子元素也是后代元素。

（5）兄弟元素：拥有相同父元素的元素是兄弟元素。

3.6.1 子元素选择器

（1）作用：选中指定父元素的指定子元素。

（2）语法：

父元素 > 子元素 {
    
}

（3）例子：

div > span {
    color: orange;
}

<div>
    <p>
        我是div中的p元素
        <span>我是p中的span元素</span>
    </p>
    <span>我是div中的span元素</span>
</div>

3.6.2 后代元素选择器

（1）作用：选中指定元素内的指定后代元素。

（2）语法：

祖先 后代 {
    
}

（3）例子：

div span {
    color: skyblue;
}

<div>
    <p>
        我是div中的p元素
        <span>我是p中的span元素</span>
    </p>
    <span>我是div中的span元素</span>
</div>

3.6.3 兄弟选择器

第一种兄第选择器：

（1）作用：选择下一个兄弟。

（2）语法：

前一个 + 下一个 {
    
}

（3）例子：

p + span {
    color: red;
}

<div>
    <p>
        我是div中的p元素
        <span>我是p中的span元素</span>
    </p>
    <span>我是div中的span元素</span>
</div>

第二种兄弟选择器：

（1）作用：选择下边所有的兄弟。

（2）语法：

兄 ~ 弟 {
    
}

（3）例子：

p ~ span {
    color: red;
}

<div>
    <span>我是div中的span元素</span>
    <p>
        我是div中的p元素
        <span>我是p中的span元素</span>
    </p>
    <span>我是div中的span元素</span>
    <span>我是div中的span元素</span>
    <span>我是div中的span元素</span>
</div>

3.7 属性选择器

（1）作用：选择含有指定属性的元素。

（2）语法：

第一种：

[属性名] {
    
}

第二种：

[属性名=属性值] {
    
}

第三种：
- 选择属性值以指定值开头的元素。

[属性名 ^= 属性值] {
    
}

第四种：
- 选择属性值以指定值结尾的元素。

[属性名 $= 属性值] {
    
}

第五种：
- 选择属性值中含有某值的元素。

[属性名 *= 属性值] {
    
}

（3）例子：

第一种：

[title] {
    color: orange;
}

<p>西风吹老洞庭波，</p>
<p>一夜湘君白发多。</p>
<p title="a">醉后不知天在水，</p>
<p title="a">满船清梦压星河。</p>

第二种：

[title = a] {
    color: orange;
}

<p>西风吹老洞庭波，</p>
<p>一夜湘君白发多。</p>
<p title="a">醉后不知天在水，</p>
<p title="b">满船清梦压星河。</p>

3.8 伪类选择器

（1）伪类（不存在的类，特殊的类）：用来描述元素的特殊状态（比如：第一个子元素、被点击的元素、鼠标移入的元素……）。

（2）特点：一般情况下使用:开头。

first-child：第一个子元素。
last-child：最后一个子元素。
nth-child()：选中第n个子元素。
- 特殊值：
  - n：第n个，n的范围0到正无穷。
  - 2n或even：表示偶数位的元素。
  - 2n+1或odd：表示选中奇数位的元素。

（3）例子：

ul > li:first-child {
    color: red;
}

<ul>
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
    <li>第四个</li>
    <li>第五个</li>
</ul>

（4）注意：以上这些伪类都是根据所有的子元素进行排序。

first-of-type
last-of-type
nth-of-type()
这几个伪类的功能和上述的类似，不同的是他们是在同类型的元素中进行排序。
not()：否定伪类，将符合条件的元素从选择器中去除。

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

<ul>
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
    <li>第四个</li>
    <li>第五个</li>
</ul>

4. 超链接的伪类

4.1 超链接的状态

link（超链接独有）：用来表示没有访问过的连接（正常的连接）。

a:link {
    color: red;
}

visited（超链接独有）：用来表示访问过的连接。
- 由于隐私的原因，所以visited这个伪类只能修改连接的颜色。

a:visited {
    color: orange;
}

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

a:hover {
    color: aqua;
    font-size: 50px;
}

active：用来表示鼠标点击时的状态。

a:active {
    color: yellowgreen;
}

5. 伪元素

（1）说明：用来表示页面中特殊的并不真实存在的元素（特殊的位置）。

（2）语法：

::

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

（3）例子：

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

div::before {
    content: "『"
}

div::after {
    content:"』"
}

6. 继承

（1）样式的继承：我们为一个元素设置的样式同样也会应用到它的后代元素上。

继承的设计是为了方便我们的开发，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需设置一次即可让所有的元素都具有该样式。
注意：并不是所有的样式都会被继承（比如：背景相关的，布局相关的等这些样式都不会被继承）。

7. 选择器的权重

（1）样式冲突：当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。

（2）选择器的权重：发生冲突时，应用哪个样式由选择器的权重（优先级）决定。

由大到小：
- 内联样式： 1000
- id选择器： 100
- 类和伪类选择器 10
- 元素选择器 1
- 通配选择器 0
- 继承的样式没有优先级
比较优先级时，需要将所有的选择的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）。
- 选择器的累加不会超过其最大数量级，类选择器再高也不会超过id选择器。
如果优先级计算后相同，此时优先使用靠下的样式。
!important：在某一个样式后面添加important后，此时该样式会获取到最高优先级，甚至会超过内联样式。
- 注意：再开发中一定要慎用。

8. 像素和百分比

8.1 像素

（1）说明：屏幕（显示器）实际上是由一个一个的小点点构成的，不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰，所以在同样的像素下不同的设备显示效果不一样。

8.2 百分比

（1）说明：可以将属性值设置为相对于其父元素属性的百分比。

好处：设置百分比可以使子元素跟随者父元素的改变进行改变。

8.3 em

（1）说明：em是相对于元素的字体大小来计算的。

1 em = 1 font-size
em会根据字体大小的改变而改变。

8.4 rem

（1）说明：rem是相对于根元素（html）的字体大小来计算的。

9. RGB

（1）说明：在css中可以直接使用颜色名来设置各种颜色，但是在css中直接使用颜色名是非常不方便的。

9.1 RGB

（1）说明：通过三种颜色的不同浓度来调配出不同的颜色。

R：re、G：green、B：blue
每一种颜色的范围在0~255之间。

（2）语法：

RGB(红色,绿色,蓝色);

9.2 RGBA

（1）说明：就是在RGB的基础上增加了一个A表示不透明度

RGBA(106, 53, 85,.5)

需要四个值，前三个和RGB一样，第四个表示不透明度。
- 1：表示完全不透明。
- .5：表示半透明。
- 0：表示完全透明。

（2）十六进制的RGB值

#ff0000;

如果颜色两位两位重复可以进行简写。

9.3 HSL、HSLA

（1）说明：

H：色相（0 - 360）
S：饱和度（0% - 100%）
L：亮度（0% - 100%）
A：不透明度（0 - 1）

（2）语法：

hsl(0, 100%, 0%)

三、布局

1. 文档流（normal flow)

（1）说明：网页时一个多层结构，一层叠着一层。通过css可以分别为每一层来设置样式，作为用户只能看到最顶上的一层。这些层中，最底下的一层称为文档流，文档流是网页的基础。我们所创建的元素默认都是在文档流中进行排列。

对于我们来说元素主要由两个状态：
- 在文档流中。
- 不再文档六种。
元素在文档流中的特点：
- 块元素
  - 块元素会在页面中独占一行（自上而下垂直排列）。
  - 默认宽度是父元素的全部（会把父元素撑满）。
  - 默认高度是被内容撑开（子元素撑开）。
- 行内元素
  - 行内元素不会独占一行，只会占自身的大小。
  - 行内元素在页面中自左向右水平排列，如果一行之中不能容纳下所有的行内元素，则元素会换到第二行继续自左向右排列（与书写习惯一致）。
  - 行内元素的默认宽度和高度都是被内容撑开。

posted @ 2021-07-24 17:38 1706010214 阅读(32) 评论(0) 收藏举报

刷新页面返回顶部

css_day_001

一、简介

1. 网页的组成

2. css（层叠样式表）

二、css语法

1. 注释

2. css基本语法

2.1 选择器

2.2 声明块

3. 常用选择器

3.1 元素选择器

3.2 id选择器

3.3 类（class）选择器

3.4 通配选择器

3.5 复合选择器

3.5.1 交集选择器

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

3.6 关系选择器

3.6.1 子元素选择器

3.6.2 后代元素选择器

3.6.3 兄弟选择器

3.7 属性选择器

3.8 伪类选择器

4. 超链接的伪类

4.1 超链接的状态

5. 伪元素

6. 继承

7. 选择器的权重

8. 像素和百分比

8.1 像素

8.2 百分比

8.3 em

8.4 rem

9. RGB

9.1 RGB

9.2 RGBA

9.3 HSL、HSLA

三、布局

1. 文档流（normal flow)

公告