CSS层叠样式表(了解即可)

一、css的语法

  • 什么是css？

    层叠样式表

  • 命名规则：

    使用字母、数字或下划线和减号构成，不要以数字开头

  • 格式：

    选择器{属性:值;属性:值;属性:值;….}

    其中选择器也叫选择符

  • CSS中注释

    /* ... */

二、在HTML中如何使用css样式（html中嵌入css的方式）

1、内联方式（行内样式）

就是在HTML的标签中使用style属性来设置css样式
格式： <html标签 style="属性:值;属性:值;....">被修饰的内容</html标签>

<p style="color:blue;font-family:隶书">在HTML中如何使用css样式</p>
特点：仅作用于本标签

2、内部方式（内嵌样式）

就是在head标签中使用<style type="text/css">....</style>标签来设置css样式
格式：

 <style type="text/css">
    ....css样式代码
 </style>

特点：作用于当前整个页面

3、外部导入方式（外部链入）

  • （推荐）就是在head标签中使用<link/>标签导入一个css文件，在作用于本页面，实现css样式设置

    格式：

    <link href="文件名.css" type="text/css" rel="stylesheet"/>

    特点：作用于整个网站

三、css2的选择符：

1、html选择符（标签选择器）

就是把html标签作为选择符使用
如 p{….} 网页中所有p标签采用此样式

h2{....}  网页中所有h2标签采用此样式

2、class类选择符 (使用点.将自定义名（类名）来定义的选择符)（类选择器P）

定义： .类名{样式….} 匿名类

其他选择符名.类名{样式….}
使用：<html标签 class="类名">...</html标签>

.mc{color:blue;} / 凡是class属性值为mc的都采用此样式 /

注意：类选择符可以在网页中重复使用

3、Id选择符(ID选择器)

定义： #id名 {样式…..}
使用：<html标签 id="id名">...</html标签>

注意：id选择符只在网页中使用一次

4、关联选择符（包含选择符）

格式： 选择符1 选择符2 选择符3 …{样式….}
例如： table a{….} /*table标签里的a标签才采用此样式*/

h1 p{color:red} /*只有h1标签中的p标签才采用此样式*/

5、组合选择符（选择符组）

格式： 选择符1,选择符2,选择符3 …{样式….}

h3,h4,h5{color:green;} /*h3、h4和h5都采用此样式*/

四、 CSS3中的选择器

  1. 关系选择器：

    div>p 选择所有作为div元素的子元素p
    div+p 选择紧贴在div元素之后p元素
    div~p 选择div元素后面的所有兄弟元素p

  2. 属性选择器：

    [attribute]选择具有attribute属性的元素。
    [attribute=value]选择具有attribute属性且属性值等于value的元素。

更多的选择器知识, 参考:https://www.w3school.com.cn/cssref/css_selectors.asp