CSS 基础使用

CSS全称为： Cascading Style Sheets ，意为层叠样式表 ，与HTML相辅相成，实现网页的排版布局与样式美化

CSS使用方式

行内样式/内联样式

借助于style标签属性，为当前的元素添加样式声明

<标签名 style="样式声明">

CSS样式声明 : 由CSS属性和值组成 例：

style="属性:值;属性:值;"

常用CSS属性 :

  • 设置文本颜色 color:red;
  • 设置背景颜色 background-color:green;
  • 设置字体大小 font-size:32px;

内嵌样式

借助于style标签，在HTML文档中嵌入CSS样式代码，可以实现CSS样式与HTML标签之间的分离。同时需借助于CSS选择器到HTML 中匹配元素并应用样式

<style>
  选择器{
    属性:值;
    属性:值;
  }
</style>

选择器 : 通过标签名或者某些属性值到页面中选取相应的元素，为其应用样式

/*标签选择器 : 根据标签名匹配所有的该元素*/  
p{
  color:red;
}

外链样式表

  • 创建外部样式表文件 后缀使用.css
  • 在HTML文件中使用标签引入外部样式表
  • 样式表文件中借助选择器匹配元素应用样式
<link rel="stylesheet" href="URL" type="text/css">

导入样式

导入样式和外联样式比较相似，采用@import样式导入CSS样式表，在HTML初始化时，会被导入到HTML或者CSS文件中，成为文件的一部分，类似第二种内嵌样式

<style>
    @import url(style.css)
</style>

样式表特征

层叠性

  • 多组CSS样式共同作用于一个元素

继承性

  • 后代元素可以继承祖先元素中的某些样式
  • 例 : 大部分的文本属性都可以被继承

样式表的优先级

  • 优先级用来解决样式冲突问题。同一个元素的同一个样式(例如文本色)，在不同地方多次进行设置，最终选用哪一种样式？此时哪一种样式表的优先级高选用哪一种。
  • 行内样式的优先级最高
  • 文档内嵌与外链样式表,优先级一致,看代码书写顺序,后来者居上
  • 浏览器默认样式和继承样式优先级较低

CSS选择器

作用

  • 匹配文档中的某些元素为其应用样式

标签选择器

根据标签名匹配文档中所有该元素

标签名{
  属性:值;
}

id选择器

根据元素的 id 属性值匹配文档中惟一的元素，id具有唯一性，不能重复使用

  • id属性值自定义,可以由数字，字母，下划线，- 组成，不能以数字开头;
  • 尽量见名知意，多个单词组成时，可以使用连接符，下划线，小驼峰表示
  #id属性值{

  }

class选择器/类选择器

根据元素的class属性值匹配相应的元素,class属性值可以重复使用,实现样式的复用

.class属性值 {

}
  1. 类选择器与其他选择器结合使用
  • 注意标签与类选择器结合时,标签在前,类选择器在后
    a.c1{ }
  1. class属性值可以写多个,共同应用类选择器的样式
.c1{  }
.c2{  }                     
<p class="c1 c2"></p>

群组选择器

为一组元素统一设置样式

selector1,selector2,selector3{           
}

后代选择器

匹配满足选择器的所有后代元素(包含直接子元素和间接子元素)

selector1 selector2{
}
  • 匹配selector1中所有满足selector2的后代元素

子代选择器

匹配满足选择器的所有直接子元素

selector1>selector2{
}

伪类选择器

为元素的不同状态分别设置样式,必须与基础选择器结合使用

:link    超链接访问前的状态
:visited 超链接访问后的状态
:hover   鼠标滑过时的状态
:active  鼠标点按不抬起时的状态(激活)
:focus   焦点状态(文本框被编辑时就称为获取焦点)
a:link{
}
a:visited{
}
.c1:hover{ }
  1. 超链接如果需要为四种状态分别设置样式,必须按照以下顺序书写
:link
:visited
:hover
:active
  1. 超链接常用设置
a{
    /*统一设置超链接默认样式(不分状态)*/
}
a:hover{
    /*鼠标滑过时改样式*/
}

选择器的优先级

使用选择器为元素设置样式,发生样式冲突时,主要看选择器的权重,权重越大,优先级越高

选择器 权重
标签选择器 1
(伪)类选择器 10
id选择器 100
行内样式 1000
  • 复杂选择器(后代,子代,伪类)最终的权重为各个选择器权重值之和
  • 群组选择器权重以每个选择器单独的权重为准，不进行相加计算
/*群组选择器之间互相独立，不影响优先级*/
body,h1,p{ /*标签选择器权重为 1 */
 color:red;
}
.c1 a{ /*当前组合选择器权重为 10+1  */
 color:green;
}
#d1>.c2{ /*当前组合选择器权重为 100+10 */
 color:blue;
}

标签分类

块元素

  • 独占一行,不与元素共行;可以手动设置宽高,默认宽度与与父元素保持一致
  • 例 : body div h1~h6 p ul ol li form, table(默认尺寸由内容决定)

行内元素

  • 可以与其他元素共行显示;不能手动设置宽高,尺寸由内容决定
  • 例 : span label b strong i s u sub sup a

行内块元素

  • 可以与其他元素共行显示,又能手动调整宽高
  • 例 : img input button (表单控件)

嵌套原则

  1. 块元素中可以嵌套任意类型的元素
  • p元素除外,段落标签只能嵌套行内元素,不能嵌套块元素
  1. 行内元素中最好只嵌套行内或行内块元素

尺寸单位

  • px 像素单位
  • % 百分比，参照父元素对应属性的值进行计算
  • em 字体尺寸单位，参照父元素的字体大小计算，1em=16px
  • rem字体尺寸单位,参照根元素的字体大小计算，1rem=16px

颜色单位

  • 英文单词：red，green，blue
  • rgb(r,g,b) 使用三原色表示，每种颜色取值0~255
  • rgba(r,g,b,alpha) 三原色每种取值0~255，alpha取值0（透明）~1（不透明）
  • 十六进制表示：以#为前缀，分为长十六进制和短十六进制。
  • 长十六进制：每两位为一组，代表一种三原色；每位的取值范围0~9，a~f
  • 例：red rgb(255,0,0) #ff0000
  • 短十六进制：由3位组成，每一位代表一种三原色，浏览器会自动对每一位进行重复扩充，仍然按照长十六进制解析
  • 例：#000 #fff #f00

常用CSS样式参考

功能 属性名 取值
宽度 width 　尺寸单位，行内元素无效
高度 height 　尺寸单位，行内元素无效
背景颜色 background-color 颜色单位
背景图片 background-image url("路径")
字体大小 font-size 尺寸单位
字体粗细程度 font-weight normal/bold(加粗)
字体样式 font-style normal/italic(倾斜)
字体名称 font-family 字体名称，如Arial,"黑体"
文本颜色 color 颜色单位
文本装饰线 text-decoration none/underline(下划线)
文本内容的水平对齐方式　 text-align left(默认值)/center/right/justify(两端对齐)
行高(文本内容垂直对齐) line-height 　尺寸单位,line-height = height 设置一行文本在元素中垂直居中,line-height > height 文本下移显示,line-height < height 文本靠上显示　
边框 border 三个值，分别为宽度/样式/颜色，用空格隔开，如 1px solid red(1像素实线边框)
单边框 border-top/right/bottom/left 同上
圆角边框 border-radius 像素值或百分比，50%为圆形，最多取4个值，按照顺序分别表示左上、右上、右下、左下，如果没有值时和对角一致
内边距 padding 常用像素值，调整元素内容与边框之间的距离， 最多取4个值，按照顺序分别表示上右下左四个方向的距离，最小值为0
单方向内边距 padding-top/right/bottom/left 取一个值
外边距 margin 调整元素与元素之间的距离，最多取4个值，按照顺序分别表示上右下左四个方向的距离
单方向外边距 margin-top/right/bottom/left 取一个值
修改鼠标指针样式 cursor pointer光标呈现为指示链接的指针
过渡效果 transition 取多个值，包含设置过渡效果的 CSS 属性的名称，完成过渡效果需要多少秒或毫秒，速度效果的速度曲线等，如width 2s linear