CSS

更新日志:

    2021.9.17：根据狂神说的视频整理出该笔记

    2022.4.18：由于学校前端选修课要考试了，根据沈大佬的笔记以及教学ppt做了一些修订和补充

CSS

Cascading Style Sheets 层叠样式表

1. 内联样式(行内样式)：

在标签内使用style属性指定css代码

1
<div style = "color :red ;">hello css</div>

2. 内部样式：

在head标签内，定义style标签

1
2
3
4
5
6
7
8
9
10
11
<head>
    <style>
                  div{
                         color:blue;
                   }
    </style>
</head>

<body>
    <div>hello css</div>
</body>

3. 外部样式

  • 定义css资源文件

  • 在head标签内，定义link标签，引入外部资源文件

a.css文件:

1
2
3
div{
  color : green;
}
1
2
<link rel = "stylesheet" href = "css/a.css">    <!-- 这个不用写在style里面 -->
<div>hello css</div>

或者

1
2
3
<style>
    @import  "css/a.css";    <!-- 来引入 -->
</style>
注意

  • 外部样式表的文件名称必须带后缀名.css。

  • CSS文件一定是纯文本格式。

  • 外部样式表修改后所有引用的页面样式自动地更新；

  • 外部样式表优先级低于内部样式表；

  • 同时链接几个外部样式表时按“最近优先的原则”

4. css的语法

格式

1
2
3
4
5
6
7
选择器{

           属性名：属性值；

           属性名：属性值；

}

最后一个属性可以不加 ；

5. 选择器

5.1 基础选择器

类选择器

1
2
3
4
5
6
7
8
9
10
11
12
<style>
        .cls1{                      <!--前面是一个 . -->
            background-color:#ff2
            color:blue
        }
        .test{
            color:green
        }
<style>
<div class = "cls1">Mercury牛逼</div>
<div class = "test">Mercury牛逼</div>
<div class = "cls1 test">Mercury牛逼</div>
类选择器注意事项
  • 类选择器是可以多次使用的
  • 一个标签可以可以有多个class,后面的内容会覆盖掉前面的(写在class里面的顺序)

id选择器：

1
2
3
4
5
6
<style>
        #div{                      <!-- 前面是一个 # -->
            color:blue;
        }
</style>
<div id = "div1" >hello css</div>
ID选择符与类选择符的区别：
  • 类选择符可以给任意多的标记定义样式，但ID选择符在页面中标记中只能使用一次，具有唯一标识性；
  • ID选择符样式比类选择符样式优先级高。ID选择符局限性大，只能单独定义某个元素的样式（特殊情况下使用）
1
<a href="#a-good-id">跳转</a>

这个可以实现跳转到id为a-good-id的标签所在的位置。那么可不可以写class呢？当然不能，因为class可能“重名”，这样就不知道到底该跳转到哪里。

元素选择器(标记选择)

1
2
3
4
5
6
7
<style>
            div{

                color:blue;

              }
</style>

5.2 扩展选择器

  选择所有元素  {}

并集选择器

1
2
3
div,p{
               color:blue;
     }

子选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 div p{ 
                    color:blue;

       }
<!-- 选择div下的p标签 -->       

div:nth-child(1)
<!--父元素下的第几个子元素-->

   div > p { 
                    color:blue;

            }
<!-- 选择父标签是div标签的p标签 -->

属性选择器

1
2
3
4
5
6
7
8
[type="text"]
{
	background-color:#ff0000;
}
[type]
{
	border:5px solid blue;
}

上述两个样式都能作用于

1
<input type="text">

伪类选择器

一种特殊的类选择符，最大的作用就是对链接<a>的不同状态定义不同的样式效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
a:link{color:#339999;text-decration:none;}
a:visited{color:#33cc00;text-decration:none}
a:hover{color:red;text-decration:underline;}
a:active{color:blue;text-decration:underline;}

<!--

link:初始化状态

visited:被访问过的状态

hover:鼠标悬浮的状态

active:正在访问的状态

-->

在支持CSS的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：未被访问状态, 已被访问状态，鼠标悬停状态, 活动状态。

注意：
- a:hover 必须被置于a:link 和a:visited 之后，才是有效的。a:active必须被置于a:hover之后，才是有效的 - CSS规定样式的优先级 行内样式 > id样式 > 类样式 > 标记样式 - CSS的继承：样式表的继承规则是子标记继承父标记的样式

附表

选择器 例子 例子描述
.class .intro 选择 class=“intro” 的所有元素。
.class1.class2 .name1.name2 选择 class 属性中同时有 name1 和 name2 的所有元素。
.class1 .class2 .name1 .name2 选择作为类名 name1 元素后代的所有类名 name2 元素。
#id #firstname 选择 id=“firstname” 的元素。
* * 选择所有元素。
element p 选择所有 <p> 元素。
element.class p.intro 选择 class=“intro” 的所有 <p> 元素。
element,element div, p 选择所有 <div> 元素和所有<p>元素。
element element div p 选择 <div> 元素内的所有<p>元素。
element>element div > p 选择父元素是 <div> 的所有 <p> 元素。
element+element div + p 选择紧跟 <div> 元素的首个 <p> 元素。
element1~element2 p ~ ul 选择前面有 <p> 元素的每个 <ul> 元素。
[attribute] [target] 选择带有 target 属性的所有元素。
[attribute=value] [target=_blank] 选择带有 target=“_blank” 属性的所有元素。
[attribute~=value] [title~=flower] 选择 title 属性包含单词 “flower” 的所有元素。
[attribute|=value] [lang|=en] 选择 lang 属性值以 “en” 开头的所有元素。
[attribute^=value] a[href^=“https”] 选择其 src 属性值以 “https” 开头的每个 <a> 元素。
[attribute$=value] a[href$=“.pdf”] 选择其 src 属性以 “.pdf” 结尾的所有<a>元素。
[attribute*=value] a[href*=“w3schools”] 选择其 href 属性值中包含 “abc” 子串的每个 <a> 元素。
:active a:active 选择活动链接。
::after p::after 在每个 <p> 的内容之后插入内容。
::before p::before 在每个 <p> 的内容之前插入内容。
:checked input:checked 选择每个被选中的<input>元素。
:default input:default 选择默认的 <input> 元素。
:disabled input:disabled 选择每个被禁用的 <input> 元素。
:empty p:empty 选择没有子元素的每个 <p> 元素（包括文本节点）。
:enabled input:enabled 选择每个启用的 <input> 元素。
:first-child p:first-child 选择属于父元素的第一个子元素的每个 <p> 元素。
::first-letter p::first-letter 选择每个 <p> 元素的首字母。
::first-line p::first-line 选择每个 <p> 元素的首行。
:first-of-type p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
:focus input:focus 选择获得焦点的 input 元素。
:fullscreen :fullscreen 选择处于全屏模式的元素。
:hover a:hover 选择鼠标指针位于其上的链接。
:in-range input:in-range 选择其值在指定范围内的 input 元素。
:indeterminate input:indeterminate 选择处于不确定状态的 input 元素。
:invalid input:invalid 选择具有无效值的所有 input 元素。
:lang(language) p:lang(it) 选择 lang 属性等于 “it”（意大利）的每个 <p> 元素。
:last-child p:last-child 选择属于其父元素最后一个子元素每个<p>元素。
:last-of-type p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
:link a:link 选择所有未访问过的链接。
:not(selector) :not(p) 选择非 <p> 元素的每个元素。
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数。
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。
:nth-last-of-type(n) p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。
:only-of-type p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个<p>元素。
:only-child p:only-child 选择属于其父元素的唯一子元素的每个<p>元素。
:optional input:optional 选择不带 “required” 属性的 input 元素。
:out-of-range input:out-of-range 选择值超出指定范围的 input 元素。
::placeholder input::placeholder 选择已规定 “placeholder” 属性的 input 元素。
:read-only input:read-only 选择已规定 “readonly” 属性的 input 元素。
:read-write input:read-write 选择未规定 “readonly” 属性的 input 元素。
:required input:required 选择已规定 “required” 属性的 input 元素。
:root :root 选择文档的根元素。
::selection ::selection 选择用户已选取的元素部分。
:target #news:target 选择当前活动的 #news 元素。
:valid input:valid 选择带有有效值的所有 input 元素。
:visited a:visited 选择所有已访问的链接。

6. 属性

6.1 字体

属性 作用 属性值
font-size 字体大小 40px|2.5em （px/16=em）
color 文本颜色 #FFCCFF
text-align 对其方式 center | left | right | justify
line-height 行高 px
font-style 字体样式 正常|斜体 normal|italic
font-weight 指定字体的粗细 px 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!--关于字体下划线等-->
<html>
<head>
<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration:blink}
a {text-decoration: none}
</style>
</head>

<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<p><a href="http://www.w3school.com.cn/index.html">这是一个链接</a></p>
</body>

</html>

image-20220427205032344

6.2 边框

属性 作用 属性值
border 设置边框粗细 、实虚线 、颜色 1px solid | dashed red

6.3 背景

属性 作用 属性值
background 控制背景图片、不重复、居中 url(“…”) no-repeat center

6.4 尺寸

属性 属性值
width …px
height …px

7. 布局

display

  • inline：此元素将显示为行内元素（行内元素默认的 display属性值）

  • block：此元素将显示为块元素（块元素默认的 display属性值）。

  • inline- block：此元素将显示为行内块元素，可以对其设置宽度、高度和对齐等属性，但是该元素不会独占一行。

  • none：此元素将被隐藏，不显示，也不占用页面空间，相当于该元素不存在。

position

静态定位 static

  1. 静态定位是元素默认的定位方式，是各个元素在HTML文档流中默认的位置。
  2. 块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
  3. 在静态定位方式中，无法通过位置偏移属性（top、bottom、left或right）来改变元素的位置

相对定位 relative

  1. 相对定位是普通文档流的一部分，相当于本元素在文档流原来出现位置的左上角进行定位。
  2. 可以通过位置偏移属性（top、bottom、left或right）来改变元素的位置。
  3. 虽然其移动到其他位置，但该元素仍占据原来未移动时的位置，该元素移动后会导致其覆盖其他的框元素。

绝对定位 absolute

  1. 绝对定位是脱离文档流的，不占据其原来未移动时的位置,是相对于父级元素或更高的祖先级中有relative（相对）定位,并且离本元素层级关系上最近元素的左上角进行定位,如果在祖先元素中没有relative定位的，就默认相对于body进行定位。
  2. 使用绝对定位的时候，一般要给出上一个相对定位的元素作为参考点。

固定定位 fixed

  1. 当元素被设置为固定定位的时候，该元素将脱离标准文档流的控制，始终依据浏览器窗口的左上角位置来定义自己的显示位置。
总结：
属性值 作用
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed 生成固定定位的元素，相对于浏览器窗口左上角进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative 生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值。

z-index(层叠次序)

z 轴定义为垂直延伸到显示区(垂直于你的显示器)的轴。如果为正数，则离用户更近，为负数则表示离用户更远

  • 元素可拥有负的z-index 属性值

  • z-index 仅能在绝对定位元素（例如 position:absolute;）上起作用

float

所谓的float就是CSS浮动，需要注意的是浮动脱离文档流，并且可以左浮动、右浮动

  • 元素左浮动后，则元素将会脱离文档流，直到其左边缘碰到包含框的左边缘。

  • 三个框都左浮动，那么第一个框其左边缘碰到包含框的左边缘，另外两个框左浮动直到碰到前一个浮动框的右边框。

  • 如果包含框太窄，无法容纳水平排列，则会向下进行浮动。

说明：

以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素

属性值 作用
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float属性的值。
注意：
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。使用 clear 属性往文本中添加图片廊 
1
2
3
4
.text_line
{
    clear:both;
}

CSS溢出

在盒子模型中的代表块元素的矩形对象，可以通过CSS样式来定义内容区域的高度与宽度，当这个内容无法容纳子矩形对象时，对于这些子矩形对象必须决定怎么显示，显示什么，这样的处理规则就称为溢出处理

1
overflow：visible｜hidden｜scroll｜auto

visibility属性

在CSS中可以使用 visibility（可见性）来设置对象是否可见，该属性的语法格式如下所示：

1
visibility: visible | hidden

visibility属性设置隐藏，但隐藏后其原来位置仍然被占用。注意与display:none的区别

边框

元素的边框（border）是围绕元素内容和内边距的一条或多条线。CSS中使用border属性设置元素边框的样式、宽度和颜色。

边框线定义方式如下：

border: 宽度、样式，颜色;

border-width，border-color

border-top…

前端
#css
CSS
http://example.com/2021/09/17/CSS/
作者
Mercury
发布于
2021年9月17日
许可协议