# 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 选中页面上所有

... 这种class 为box的元素 | | 属性选择器 | 具有特定属性的元素 | a[title] 选中页面上所有存在title属性的元素 并且可以通过a[title='xxx']来匹配特定的属性值 | | 通配符 | 所有元素 | * | | 多个元素 | 不同选择器用 , 连接 | div,span 同时匹配到页面中所有的div和span元素 | | 选择后代元素 | 用空格连接 A B | div span 匹配所有div中的所有span元素 | | 伪类 :hover | a:hover | 匹配所有鼠标移入状态下的a标签 | ## css 优先级 优先级是分配给指定css声明的一个权重,只有多个样式规则赋给同一个元素而且定义的属性有冲突的时候,优先级才有意义 1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。 2. 作为style属性写在元素内的样式 3. id选择器 4. 类选择器 5. 标签选择器 6. 通配符选择器 7. 浏览器自定义或继承 **总结排序:!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性** ### css 常用属性 width:数值 px (单位) 设置宽度 height:数值 px(单位) 设置高度 background: 英文颜色或者16进制颜色码(如\#ff0000)或者rgb颜色码(如rgb(255,0,0))或者图片( url('文件路径') ) 设置背景颜色 color:英文颜色或者16进制颜色码(如\#ff0000)或者rgb颜色码(如rgb(255,0,0)) 设置字体颜色 border: 1px solid red 1px 是边框宽度 solid 是线条类型为直线 red 为边框颜色 border-radius:29px 边框圆角 font-size:13px 字体大小 font-weight:normal(正常默认) 或者 bold(加粗) line-height:20px 设置行高 text-align:left( 左对齐) center (居中) right(右对齐) 文字对齐方式 overflow :auto(滚动条)/ hidden (隐藏) 横向和纵向内容溢出的表现 overflow-x:auto(滚动条)/ hidden (隐藏) 横向内容溢出的表现 overflow-y:auto(滚动条)/ hidden (隐藏) 纵向内容溢出的表现 verticle-align 设置元素的垂直对齐方式 属性值: * baseline 默认值,元素放置在父元素的基线上 * text-top 元素顶端和父元素字体顶端对齐 * text-bottom 元素顶端和父元素字体底部对齐 * middle 元素位于父元素的中部 ...