CSS 样式语言 选择器

CSS介绍

---

• 层叠样式表，是一种样式表语言，用来描述HTML和XML文档的呈现。
• 随着HTML的发展，为了满足页面设计者的要求，HTML添加了很多显示功能，但是随着这些功能的增加，使得HTML越来越杂乱，HTML 页面也越来越臃肿，CSS便随之诞生。
• CSS 用于简化HTML标签，把关于样式部分的内容提取出来，进行单独的控制，使结构与样式分离开发。
• CSS 是以HTML为基础，设置网页的外观显示样式，如字体、颜色、背景的控制及整体的布局等，和 HTML 类似
• CSS也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言。当浏览器读到一个样式 表，它就会按照这个样式表来对文档进行格式化（渲染）。

html是一个架子和内容，css会去给它做美化样式的功能。

CSS使用方法

---

内联方式（行内样式）这个是跟着html标签走的，在HTML中如何使用css样式

在HTML中如何使用css样式

内部方式（内嵌样式），在head标签中使用，里面是选择对哪个标签生效

外部导入方式(推荐)，在head标签中使用

    
    
    
    



    

        
这是在div元素当中的段落
        我是一串文字
    

 

选择器

---

选择器：需要改变样式的HTML元素   格式: 选择器{属性:值;属性:值;属性:值;....}

常见选择器： 标签选择器、类选择器、 ID 选择器、派生选择器

1) 元素选择器

使用 html 标签作为选择器，为指定标签设置样式。

• 示例1：h1元素设置样式

h1 {
    color: red;
    font-size: 14;
}

• 示例2：多个元素设置样式

h1,h2,h3,h4,h5,h6 {
    color: green;
}

• 示例3：子元素会继承最高级元素所有属性

body {
    color: #000;
    font-family: Verdana, serif; /*字体*/
}

• 代码示例 

    
    
    
    



    
在HTML中如何使用css样式
    我是一串文字

可以看到设置了父标签body样式，那么body里面的标签也会被渲染为父元素的css样式。当子元素有自己定义样式，那么优先级是子元素自己的优先。

2) ID 选择器

• 使用“id”作为选择器，为指定id设置样式。
• 使用格式:#id名{样式...}
• 特点：每个id名称只能在HTML文档中出现一次;在实际开发中，id一般预留JavaScript使用

其实就是给标签加上id的值。每个选择器使用场景其实是不一样的。元素选择器当你有共同的元素它会被一起加上样式，如果没有共同的元素，只有a标签，那么只有它这一个地方会被去加上css样式。

• 使用方式：

/*第一步: 给标签指定id*/
...

/*第二步: 针对id设置样式*/
#t {
    color: red;
}

• 代码实例

    
    
    
    



    
在HTML中如何使用css样式

 3) 类选择器

• 使用“类名”作为选择器，为指定类设置样式。
• 使用格式:.类名{样式...}

使用方式

    
    
    
    



    
在HTML中如何使用css样式
    
在HTML中如何使用css样式
    在HTML中如何使用css样式