CSS 基础

简介

CSS（Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言。

CSS 文件扩展名为 .css。

CSS 引入方式

CSS 样式会作用在 HTML 元素基础上，根据不同的编写位置，可分为不同的引用形式：

行内式：通过 style 属性，直接在标签上为标签设置样式
内嵌式（内部样式）：通过 style 标签批量编写样式，一般在 head 标签中编写
外链式：样式代码编写在 CSS 文件中，在页面文件的 head 标签中通过 <link> 标签引入样式文件。

CSS 样式格式规则

    选择器{
        样式规则属性名1：属性值1;
        样式规则属性名2：属性值2;
        样式规则属性名3：属性值3;
    }

CSS 选择器

需要使用 CSS 为 HTML 页面文件中的元素添加样式，需要通过 CSS 选择器，选中页面中的元素，然后才能让样式作用在元素上。

常用选择器如下：

1. 标签选择器

使用 HTML 标签名 做为选择器选定元素，会选中页面中所有指定标签的元素并设定样式

css: p {
  color: red;
}

html: <p>文本1</p> <div>文本2</div> <p>文本3</p>;

2. 类选择器

类选择器需要结合标签的 class 属性使用，通过 class 属性为标签指定类名，使用 .类名 形式选择所有页面中具有指定类名的元素。

css: .text {
  color: red;
}

html: <p class= "text" >文本1</p> <div class= "text" >文本2</div> <p>文本3</p>;

3. id 选择器

id 选择器需要结合标签的 id 属性使用，通过 id 属性为标签指定 id 名，使用 #id名 形式选择具有指定 id 名的元素。

理论上，一个 id 名在页面中是唯一存在的。

css: #text {
  color: red;
}

html: <p id= "text" >文本1</p> <p>文本2</p>;

4. 层级选择器（后代选择器）

根据层级关系选择后代标签，以 选择器1 选择器2 开头，主要应用在标签嵌套的结构中，减少命名,选择器可以使用任意形式的选择器。

层级关系不止父子关系，祖孙关系也成立。

div p span{
    color: red;
}

HTML

<p>文本<span>一</span></p>
<div>
    <p>文本<span>二</span></p>
</div>
<div>文本<span>三</span></div>

5. 组选择器

组选择器为多个任意选择器的组合，多个选择器之间以 , 分割开, 组中所有选择器对应的元素都会被选中。一般用来设置公共的样式。

css: p, div, h1 {
  color: red;
}

html: <h1>A</h1> <div>B</div> <p>C</p> <p>D</p>;

6. 伪类选择器

用于向选择器添加特殊的效果, 以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器

<style type="text/css">
    .box1{width:100px;height:100px;background:gold;}
    .box1:hover{width:300px;}
</style>

<div class="box1">这是一个div标签</div>

CSS 样式属性

布局类属性

width: 设置元素宽度
height: 设置元素高度
background: 设置元素背景色和背景图片，设置背景图片需要使用 url() 函数
border: 设置边框样式
margin: 设置外边距
padding: 设置内边距
display: 设置元素布局状态等。

文本类属性

color: 设置字体颜色
font-size: 设置字体大小
font-weight: 设置字体加粗
line-height: 设置行高
text-align: 设置平水对齐方式
text-decoration: 设置文字下划线
text-indent: 设置文字首行缩进

总结

CSS 引入方式
CSS 样式格式规则
CSS 选择器
CSS 样式属性