Document

# css 基础 ## 定义 css(层级样式表， Cascading Style Sheets) 是一种样式表语言，用来描述HTML或XML 文档的呈现，他和html一样都不是编程语言，他甚至不是标记语言，他是一门样式表语言。我们用来给html的元素选择性的添加样式 ## 在页面中使用css 方式1（行内样式）：在html标签中用style属性给选中元素写入css样式 ``` Document

hello world

``` 效果如下： ![image-20201230160237854](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201230160237854.png) 方式2（内部样式表）：在head 标签中写入 style标签，然后从style标签内写css的内容 ``` Document

hello world

``` 效果如下： ![image-20201230160237854](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201230160237854.png) 方式3 （外部样式表）从head标签中通过link 标签引入外部的css文件从而建立html文件和css文件之间的连接 > > > link 标签中的rel=“stylesheet”必须加上 > > href 为url地址 > > type 链接文件的格式可省略省略的部分为：type="text/css" > > rel属性规定当前文档与被连接文档之间的关系，但是只有值为stylesheet的时候，能够得到浏览器的支持 ``` Document

hello world

``` 效果同上： ![image-20201230160447459](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201230160447459.png) ## css 语法那让我们解读一下刚才写的css代码 ``` body{ background:blue } ``` 其中 body 叫选择器，可以选中一个或多个需要添加此样式的元素，这个例子中是body 如果要给不同的元素添加样式，只需要更改选择器部分就可以了 {} 内部的内容为规则集，css中除了选择器部分，样式相关的所有内容全部要包括在成对的大括号里（{}） {} 中的一行为一个声明，声明由属性:属性值组成，用来指定添加样式元素的属性如本例的background:blue 声明中冒号左边的部分为属性，冒号右边的部分为属性值重要的语法归纳： - 除了选择器的部分都应该包含在成对的大括号里，即{} 里面 - 每个声明中要用 : 将属性名和属性值分割开 - 每个规则集中，要用 ; 把各个声明分割开 ## css选择器基本选择器： | 选择器名称 | 选中的内容 | 示例 | | ----------------------- | -------------------------- | ------------------------------------------------------------ | | 标签选择器 | 页面上所有该标签的html元素 | p 选中页面上所有的p标签 | | id选择器 | 具有特定id的html元素 | #name 选中页面上所有

或 ...这种id为name 的元素 | | 类选择器 | 具有特定类的元素 | .box 选中页面上所有