CSS基础（1）|青训营笔记

用户5137483773061
48 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的第4天

本堂课的重点

简单的介绍了css的语法，作用，选择器等

css简介

Cascading Style Sheets层叠样式表

1.作用

配合HTML语言，让网页在浏览器中表现得更加优雅， 大多数情况下css是以文件方式存在的（独立文件），但是也可以通过内嵌/行内的方式书写。

2.CSS的声明方式

元素{ ​
样式名称:样式值; ​
}

3.CSS的注释

/* 注释内容 */

4.CSS语法：

1.最后一条css样式可以没有分号，但是为了以后修改方便，一般也加上分号。

2.为了使用样式更加容易阅读，可以将每条代码写在一个新行内。

5.CSS如何作用于HTML

1.行内样式

        <p style="color: red;">今天天气很好，小明哭了！</p>

2.内嵌样式

注：1.即使有公共css代码，也需每个页面都要定义。
2.适合的文件很少，CSS代码也不多的情况。
3.若一个网站有很多页面，内个文件都会变大，后期维护难度也大。

        <style>
            p{
                color: yellow;
            }
        </style>

3.链接样式（推荐）

优点：1.页面结构HTML代码与样式CSS代码的完全分离。
2.维护方便。
3.如果需要改变网站风格，只需要修改公共CSS文件。
4.可以在同一个HTML文档内引用多个外部样式表。 `<link rel="stylesheet" href="style/index.css"> `
4.导入样式(不推荐)

        <style>
            @import url(style/index.css);
        </style>

选择器

1.基本选择器

  • ID选择器：可以给标签添加唯一的标识，以这个标识进行选择（唯一且单一）
  • 类选择器：可以给多个元素添加相同的类别名称，让这些元素都拥有相同的样式，一个元素可以拥有多个类别。
  • 标签选择器：所有的标签名称都可以作为选择器，包括根标签（HTML）

选择器权重：id选择器>class选择器>标签选择器

2.普遍选择器（*）：

可以选中所有的元素

3.层次选择器

  • 后代选择器（ descendant selector ）

    使用空格隔开两个选择器。例如 ul li表示选择ul的后代元素li， li可以为ul的直接子元素，也可以为ul的孙子元素。

  • 子代选择器（ child selector）

    使用 “>” 隔开两个选择器。例如 ul>li表示选择ul的直接子代元素li,ul的孙子元素li无法被选择到

  • 相邻同胞选择器（ adjacent sibling selector） 只选中相邻的那一个

    使用 “+” 隔开两个选择器， 选择该元素后紧挨着的同级的指定元素。例如.one+表示选择class为"one"元素的下一个兄弟元素。

  • 一般同胞选择器（ general sibling selector）

    使用 “~” 隔开两个选择器,选择该元素后所有的同级的指定元素。例如 .one~表示选择class为"one"元素的所有兄弟元素。

4.多选择器

一次选中多个元素

元素1，元素2，元素3{}

5.组合选择器

可以通过多个选择器组合，进行一些类似过滤的效果

选中b标签里id名为g的

   b#g{
   font-size:30px;
   }

6.属性选择器

可以通过元素属性，对元素进行选择

  • b标签中有class属性的被选中
   b[class]{
   color:red;
   }
  • p标签中class属性值为red的元素被选中
p[class=red]{
color:red;
}
  • p标签中有class属性值中只要有red的元素被选中
p[class~=red]{
color:red;
}

  • p标签中class属性值为以red开头的元素被选中（多个类）(class="blue red")

    <p class="red_yellow">小王哭了<span>小王哭了</span></p>

    p[class^=red]{
color:red;
}

  • p标签中class属性值为以red结尾的元素被选中

<p class="color_red">小王哭了<span>小王哭了</span></p>

p[class$=red]{
color:red;
}
  • p标签中class属性值为包含red开头的元素被选中(一个类) (class="color_red") 
    p[class*=red]{
color:red;
}

7.伪类选择器

通过一些特殊的过滤效果去选择元素

选择唯一的子元素 ul li:only-child{ background-color:red; } 选择第一个子元素 ul li:first-child{ background-color:red; } 选择最后一个子元素 ul li:last-child{ background-color:red; } 选择某一个子元素，可以使用odd，even实现隔行变色，n表示序号 ul li:nth-child(n){ background-color:red; } 选择p标签中的b元素的第一个类型 p b:first-of-type{ background-color:red; } 选择p标签中的span元素的第n个类型 p span:nth-of-type(1){ font-size: 22px; } ✓ :hover 鼠标经过该元素时的状态

✓ :active 鼠标按下的时的状态

✓ :focus 元素获取焦点时的状态

✓ :enabled 元素可用时的状态

✓ :disabled 元素不可用时的状态

✓ :checked 元素选中时的状态

✓ :default 元素默认状态

✓ :invalid 元素值非法时的状态

✓ :valid 元素值合法时的状态

✓ :required 元素值为非空时的状态

✓ :optional 元素不为非空时的状态

✓ :in-range 元素值在区间内的状态

✓ :out-of-range 元素值不在区间内的状态

8.伪元素选择器

伪元素以"::"开头，用在选择器后，用于选择指定的元素。

✓ ::after 后方追加内容

✓ ::before 前方追加内容

✓ ::first-letter 首字样式

✓ ::first-line 首行样式

✓ ::selection 选中样式

#a::before{
content:'小王哭了'
}

#a::after{
content:'小王哭了';
}
avatar
文章
阅读
粉丝