《CSS基础入门篇》

一、CSS概念

CSS：是Cascading Style Sheets的英文缩写，CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（如文字的字体、大小、对齐方式等）、图片的外形（如宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

二、CSS样式规则

使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，大体格式如下：

目前记住样式大概是由选择器，属性和值三部分构成，将在下面第四点选择器根据不同选择器具体展开介绍。

三、文字控制的属性

font-size----------控制文字的字号大小，需要加上px单位；

color---------------控制文字的颜色，只针对文字有效；

font-family-------设置文字的字体，中文需要用引号括着；

text-align---------设置文本水平对方式，值有三个：left center right。

四、选择器

1、选择器概念

在 CSS 中，选择器是选取需设置样式的元素的模式。

2、选择器类别

按照选择器的功能分为不同类别，常用的是元素选择器、类选择器和ID选择器，还有其他类型的选择器，如：集体选择器、属性选择器和后代选择器等，掌握各种选择器的用法，综合使用，创建出更精美的页面。

3、选择器具体介绍

3.1、元素选择器

概念：

元素选择器是最常见的 CSS 选择器。换句话说，文档的元素就是最基本的选择器。如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身，注意元素选择器名字只能是html里原来拥有的名字，不能自定义。

设置元素选择器这里介绍两种使用方法：第一种是在具体某个元素内设置，第二种是在标签里建

我是在"<"head">"标签里设置样式的结果1

我是在"<"head">"标签里设置样式的结果2

我是对比段落文本，样式没有改变

运行结果：

代码解析：

注意

对比文本，没有使用类选择器样式

使用ClassSelect1_color的文本，我的字体颜色和背景颜色发生变化

使用ClassSelect2_size的文本，我的字体大小发生变化

对比文本，多个类样式选择器的使用，注意类之间用空格隔开

使用ClassSelect1_color和ClassSelect2_size的文本，我的字体颜色、大小和背景颜色都发生变化

运行结果：

代码解析：

先看一下我们加了什么内容

上面我们在

此段落用了ID选择器进行修饰

此段落为对比段落，没有进行修饰

运行结果：

代码解析：

在上面的代码里，我们在

标题一

文本一

文本二

文本三

链接1 链接2 使用类样式_color的span标签内容没有使用类样式_color的span标签内容

文本四

标题二

链接3

标题三

运行结果：

代码解析：

在链接1 链接1 链接3（没有写name属性，所以没有样式）

有title属性的p标签

没有title属性的p标签

运行结果：

代码解析：

在

资源连接：

运行结果：

代码解析：和

标签可跳到第五点、拓展资料查看

3.6、后代选择器

概念：后代选择器（descendant selector）又称为包含选择器。后代选择器可以选择作为某元素后代的元素。元素的后代可以是元素的第一代、第二代、第三代等等。

代码：




    
    
    
    Document



    
        这是p元素
        这是p的后代span子元素
        的内容 有p有span，生效
    
    
        这是一个没有包含 span 子元素的 p 元素，不生效
    
    
    使用类样式的后代选择器
    
        链接
        使用了_a类的p元素，且有a标签，生效
    
   
       使用了类_a的p元素，但是没有a元素，不生效

运行结果：

代码解析：

在

标题1

我是span1的内容，我的上方是h1标签，我离得最近，所以字体颜色变红

我是p的内容，我离span1最近且按顺序排在span后面，所以字体颜色是紫色的

我上面有p标签隔开了我和第一个span标签，虽然我相邻的后边有span标签，但是和前面定义的顺序不一样，所以我的字体颜色不变

我是span2的内容

运行结果：

代码解析：

在