前端 CSS

前端

发布日期: 2021-06-17

文章字数: 4.2k

阅读时长: 16 分

阅读次数:

目录：

CSS简介

CSS基础

CSS文字和字体样式

CSS背景样式

CSS列表样式

盒子模型

CSS的float

CSS的定位

CSS的布局

参考：

慕课网

CSS

CSS简介

Cascading Style Sheets，层叠样式表
使用其来表现HTML或者XML等样式文件

HTML、CSS和JS的关系

HTML是网页内容的载体
CSS样式是表现（外观控制）
JavaScript是行为，用来实现网页特效效果

CSS的作用

CSS基础

CSS基础语法

CSS样式规则

CSS规则由两部分构成：选择器、声明

注意

选择器可以是多个，之间用逗号隔开

CSS注释

html注释


css注释

/*注释*/

CSS使用方法

CSS样式的引用

行内样式（内联样式）

在开始标签内添加style样式属性
```
<p style="color:red;">
  内容
</p>
```

内部样式表（嵌入样式）

<head>
  <style type="text/css">
  	css样式
  </style>
</head>

外部样式表（Link链入）

把css样式代码写在独立的一个文件中
- 扩展名：CSS文件名.css
- 引入：
```
<head>
  <link href="xx.css" rel="stylesheet" type="text/css" />
</head>
```
导入式

注意：需要写在style标签内

总结

CSS使用方法优先级

对同一个元素，使用多个css的优先级的问题

行内样式 > 内部样式 > 外部样式

链入外部样式表与内部样式表之间的优先级取决于所处位置的先后
最后定义的优先级最高（就近原则）

CSS选择器

主要分为6类：

标签选择器
全局选择器
类选择器
群组选择器
ID选择器
后代选择器

标签选择器

以HTML标签作为选择器

<style>
  p,h1,h2,h3,h4{font-size:30px;}
  p{
    color: blue;
    font-family:"宋体";
  }
  h1{color:red;}
</style>

类选择器

为HTML标签添加class属性

<h1 class="red">
  内容1
</h1>
<p>
  内容2
</p>
<p class="red">
  内容3
</p>

通过类选择器来设置css样式：

<style>
  .red{color:red;}
</style>

可以对不同类型元素的同一个类选择器设置不同的样式

<h1 class="red">
  内容1
</h1>
<p>
  内容2
</p>
<p class="red">
  内容3
</p>

<style>
  p.red{...}
  h1.red{...}
</style>

同一个元素可以设置多个类，用空格隔开

<h1 class="red">
  内容1
</h1>
<p class = "red fsize">
  内容2
</p>
<p class="red">
  内容3
</p>

ID选择器

添加ID属性

<h1>
  内容1
</h1>
<p id="p1">
  内容2
</p>
<p id="p2">
  内容3
</p>

通过ID选择器来为元素设置CSS

<style>
  #p1{...}
  #p2{...}
</style>

注意：在一个html文件中，id是唯一的。一个id不能在多个标签中，一个标签也不能有多个id

群组选择器

集体统一设置格式

<style>
  p,h1,h2,h3,h4{font-size:30px;}
</style>

全局选择器

所有标签设置样式

<style>
  *{
    ...
  }
</style>

后代选择器

<style>
  p a em{...} /*p标签中a标签的em标签*/
  #p1 em{...} /*id为p1的标签中的em标签*/
  p.red a em{..} /*class为red的p标签中的a标签中的em标签*/
</style>

伪类

概念

伪类选择器定义特殊状态下的样式
无法用标签、id、class及其它属性实现

链接伪类

链接中的4种状态：

伪类	说明
`:link`	未访问的链接
`:visited`	已访问的链接
`:hover`	鼠标悬停状态
`:active`	激活的链接

<style type="text/css">
  a:link{color:blue;} /*未访问状态*/
  a:visited{color:gray;} /*已访问状态*/
  a:hover{color:green;} /*鼠标悬浮状态*/
  a:active{color:orange;} /*激活状态*/
</style>

伪类:hover和:active
- :hover用于访问的鼠标经过某个元素时
- :active用于一个元素被激活时（按下鼠标之后放开鼠标之前的时间）

伪类顺序

:link > :visited > :hover > :avtive

a:hover必须置于a:link和a:visited之后，才有效
a:active必须置于a:hover之后，才有效
伪类名称对大小写不敏感

CSS继承和层叠

继承

从父样式继承了部分属性

层叠

可以定义多个样式
不冲突时，多个样式可层叠为一个
冲突时，按不同样式规则优先级来应用样式
层叠时的优先级
1. id选择器 > class选择器 > 标签选择器
2. 同类样式多次引用，样式表中后定义的优先级高

CSS优先级规则

同一样式表中：

权值相同

就近原则
权值不同

根据权值来判断css样式

哪种css样式权值高，就使用哪种样式

选择器权值

标签选择器：权值1
类选择器和伪类：权值10
ID选择器：权值为100
通配符选择器：权值为0
行内样式：权值为1000

权值规则

统计不同选择器的个数
每类选择器的个数乘以相应权值
把所有的值相加得出选择器的权值

列如下列计算权值：

!important规则

可调整样式规则的优先级
添加在样式规则之后，中间用空格隔开

<style>
  div{color:red !important;}
</style>

作用的样式，为最高优先级。

总结

!important声明高
css使用方法的优先级

行内样式 > 内部样式 > 外部样式

注意：link链入外部样式和style内部样式优先级，取决于先后顺序
样式表中优先级

ID选择器 > class选择器 > 标签选择器 > 通配符

CSS样式命名

CSS命名规则

采用英文字母、数字以及“-”和“_“命名
以小写字母开头，不能以数字和“-”、“_“开头
命名形式：单子，连字符，下划线和驼峰

常用CSS命名

页面结构
- 页头 header
- 导航 nav
- 页面主体 main
- 侧栏 sidebar
- 页尾 footer
- 栏目 column
- 内容 content/container
- 页面外围控制 wrapper
- 容器 container
- 左右中 left right center
导航
- 导航 nav
- 左导航 leftsidebar
- 主导航 mainnav
- 右导航 rightsidebar
- 子导航 subnav
- 菜单 menu
- 顶导航 topnav
- 子菜单 submenu
- 顶导航 topnav
- 边导航 sidebar
- 标题 title
- 摘要 summary
功能
- 标志 logo
- 注册 register
- 广告 banner
- 搜索 search
- 登录 login
- 功能区 shop
- 登录条 loginbar
- 标题 title

注意事项

id不要滥用，谨慎使用
适当使用class

CSS文字和字体样式

CSS文字样式

文字样式属性

字体：font-family
文字大小：font-size
文字颜色：font-color
文字粗细：font-weight
文字样式：font-style

字体：font-family

定义元素内文字以什么字体来显示
语法：
font-family:[字体1],[字体2],[…]
说明：
- 含空格字体名和中文，用英文引号(“ )括起
- 多个字体，用英文逗号“，”隔开
- 引号嵌套，外使用双引号，内使用单引号
- 设置多个字体，浏览器一次查找，如果都没有，就使用浏览器默认样式

font-family属性值，除了是具体字体名，也可以是字体集
字体集:
• Serif
• Sans-serif
• Monospace
• Cursive
• Fantasy
其中，Serif和Sans-serif区别
#### 文字大小：font-size
定义元素内文字大小
语法：
font-size: 绝对单位|相对单位
- 绝对单位
- 相对单位：都是相对于父元素的大小
  - px 像素
  - em/%

文字颜色： color

定义元素内文字颜色
语法：
color: 颜色名|十六进制|RGB

注意，对于十六进制，如果两两相同可以简写为3位数字：

#008800 简写为 #080

文字粗细: font-weight

为元素内文字设置粗细
语法：
font-weight: normal | bold | bolder | lighter | 100~900
说明：
默认值：normal
400 等同于 normal，而 700 等同于 bold

文字样式: font-style

为元素内文字设置样式

语法：
font-style: normal|italic|oblique

font-variant字体变形

设置元素中文本为小型大写字母
语法：
font-variant: normal | small-caps

CSS文本样式

水平对齐方式: text-align

设置元素内文本的水平对齐方式
语法：
text-align: left | right | center | justify
注：该属性对块级元素设置有效

文本行高: line-height

设置元素中文本行高
语法：
line-height: 长度值 | 百分比
说明：一行文字的高度。行高指文本行的基线间的距离。
- 文字基线
- 行高和行距
- 行框和行内框

垂直方式: vertical-align

设置元素内容的垂直方式

语法：
vertical-align: baseline | sub | super | top | text-top

                     middle | bottom | text-bottom
                     长度 | 百分比

其他

CSS背景样式

设置元素的背景颜色

background-color: 颜色｜ transparent
说明
- transparent是全透明黑色(black)的速记法，类似rgba(0,0,0,0)这样的值。
- 颜色值（颜色名｜RGB｜十六进制｜）
- 背景区包括内容、内边距（padding）和边框（默认颜色和文本颜色一致）、不包含外边距（margin）

图像设置为背景

background-image : URL｜ none
说明
- url地址可以是相对地址也可以是绝对地址
- 元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。
- 默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复（当容器尺寸大于背景图片时，图片需要重复，这里就是往哪个方向重复）。
- 既设置背景颜色又设置背景图片时，图片会覆盖颜色。

设置背景图像的起始位置

background-position : 百分比｜值 top ｜right ｜ bottom ｜ left ｜ center

背景图像是否固定或者随着页面的其余部分滚动

background-attachment: scroll ｜fixed
说明：
- scroll ：默认值，背景图片随滚动条滚动
- fixed ：当页面的其余部分滚动时，背景图片不会移动

背景图像是否重复

background-repeat: repeat ｜ no-repeat repeat-x ｜repeat-y
参数说明
- repeat ：默认值，背景图片水平方向和垂直方向重复
- repeat-x：背景图片水平方向重复
- repeat-y : 背景图片垂直方向重复
- no-repeat : 背景图片不重复

将背景属性设置在一个声明中

background：[background-color] [background-image] [background-repeat] [background-attachment]
[background-position] []
说明：各值之间用空格分割，不分先后顺序

CSS列表样式

设置列表项标志的类型

list-style-type: 关键字｜none
无序列表

有序列表

将图像设置为列表项标志

list-style-image: URL ｜none

设置列表中列表项标志的位置

list-style-position: inside ｜outside
说明
- inside :列表项目标记放置在文本以内，且环绕文本根据标记对齐
- outside :默认值，列表项目标记放置在文本以外，且环绕文本不根据标记对齐

用于把所有列表的属性设置于一个声明中

list-style: list-style-type list-style-position list-style-image
说明
- 值之间用空格分隔割
- 顺序不固定
- list-style-image 会覆盖 list-style-type的设置

盒子模型

盒子模型概念

盒子模型用来“放”网页中的各种元素。
网页设计中内容，如文字、图片等元素，都可是盒子（DIV嵌套）

高和宽设置

可以设置高和宽的html元素
- 块级元素
  
  <p>、<div> 、 <h1> ~ <h6> 、<ul> 、<li> 、<ol> <dl> 、<dt> 、<dd>等
- 替换元素
  <img>、<input>、<textarea>等
HTML标签分类
- 块级标签：占据一行，换行。
  <div>、<ul>、<ol>、<li>、<dl>、<dt>、<dd> <h1>~<h6>、<p>、<form>、<hr>…
- 行内标签：在一行，不换行。
  非替换元素：<b>、<em>、<a>、<span>……
  替换元素：<img>、<input>、<textarea>……

边框设置

宽度： border-width : thin | medium | thick | 长度值
颜色： border-color ：颜色 | transparent
样式：border-style : 值 | none | hidden

值	描述
none	定义无边框。默认值
hideden	与 “none” 相同。除非在表格元素中解决边框冲突时
dotted	定义点状边框。在大多数浏览器中呈现为实线
dashed	定义虚线。在大多数浏览器中呈现为实线
solid	定义实线
double	定义双线
groove	定义 3D 凹槽边框
ridge	定义 3D 垄状边框
inset	定义 3D inset 边框
outset	定义 3D outset 边框
inherit	规定应该从父元素继承边框样式

方向：

border-[left | right | top | bottom]-width 
border-[left | right | top | bottom]-color
border-[left | right | top | bottom]-style

总体设置/缩写

border : [宽度] | [样式] | [颜色] 
不同方向： 
	border-top : [宽度] | [样式] | [颜色] 
	border-left : [宽度] | [样式] | [颜色] 
	border-right : [宽度] | [样式] | [颜色]
	border-bottom ：[宽度] | [样式] | [颜色]

内边距设置

设置元素的内容与边框之间的距离（内边距或填充）,分4个方向（上、右、下、左）

– padding-top : 长度值 | 百分比

– padding-right :长度值 | 百分比

– padding-bottom :长度值 | 百分比

– padding-left :长度值 | 百分比
说明：值不能为负值
缩写

padding : 值1； //4个方向都为值1 
padding : 值1 值2 ; // 上下=值1，左右=值2
padding : 值1 值2 值3；// 上=值1，左右=值2，下=值3
padding : 值1 值2 值3 值4；// 上=值1，右=值2，下=值3,左=值2

外边距设置

设置元素与元素之间的距离（外边距）, 4个方向（上、右、下、左）

– margin-top : 长度值 | 百分比 | auto

– margin-right : 长度值 | 百分比 | auto

– margin-bottom : 长度值 | 百分比 | auto

– margin-left : 长度值 | 百分比 | auto
说明：值可为负值
缩写

margin : 值1； //4个方向都为值1 
margin : 值1 值2 ; // 上下=值1，左右=值2 
margin : 值1 值2 值3；// 上=值1，左右=值2，下=值3
margin : 值1 值2 值3 值4；// 上=值1，右=值2，下=值3,左=值2

默认情况下，相应HTML块级元素存在外边距
- body、h1~h6、p……
- 可以通过声明margin属性，覆盖默认样式

margin值为auto , 实现水平方向居中显示效果，由浏览器计算外边距
垂直方向，两个相邻元素都设置外边距，外边距会发生合并。合并后外边距高度=两个发生合并外边距的高度中最大值

盒子的计算

说明
- 在 CSS 中，width 和 height 指的是内容区域的宽度和高度
- 增加内边距、边框和外边距不会影响内容区域的尺寸
- 但会增加元素框的总尺寸
计算

CSS的float

四个参数

float:right; 右浮动 
float:left; 左浮动
float:none; 不浮动
float:inherit; 继承

float属性实现文本环绕
- float属性定义了元素在哪个方向进行动
- 在HTML中任何元素都是可以浮动的
loat浮动的真正原因以及副作用
- 浮动的元素不占有原空间
- 使得元素脱离了标准流
- 父元素塌陷及其他元素异位

CSS的定位

HTML中的三种布局方式

浮动
标准流
定位

position属性的意义

通过top、right、bottom、left实现位置的改变
position属性决定了元素将如何定位

position中的可选参数

static 绝对定位
relative 相对定位
- 可以利用 top right bottom left 进行定位不脱离文档流，可以进行块元素之间的覆盖和交叉
- 为子定位划分作用域
- 移动区域为整个网页
absolute
- 可以利用 top right bottom left 进行定位脱离文档流，有了层的概念。
- 为子定位划分作用域
- 移动区域为整个网页
fixed
- 可以利用 top right bottom left 进行定位脱离文档流
- 为子定位划分作用域
- 移动区域为整个窗口区
inherit

继承父元素的position属性，其它属性不继承！

层级

概念
- 通过顺序插入，越后添加的定位元素层级越大
- 通过z-index改变层级
- 不同父元素中的子元素的层级各不相干
z-index 属性值
- z-index：auto(默认值)
- z-index：inherit（继承）
- z-index：number（number指具体数值）
z-index 特性
- 可以设置元素的叠加顺序，但依赖定位属性
- z-index大的元素会覆盖z-index小的元素
- z-index为auto的元素不参与层级比较
- z-index 为负值，元素被普通流中的元素覆盖

CSS的布局

行布局

多列布局

圣杯布局

双飞翼布局

布局要求

三列布局，中间宽度自适应，两边定宽
中间栏要在浏览器中优先展示渲染
允许任意列的高度最高
只用一个额外的DIV标签
用最简单的CSS、最少的HACK语句

小小千千

https://jason-qianhao.github.io/2021/06/17/css-zhi-shi-hui-zong/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源小小千千 !

前端 CSS

Leetcode分类刷题

2021-06-17 数据结构和算法

数据结构和算法 Leetcode

JavaScript知识汇总

2021-06-17 前端

前端 JavaScipt

CSS知识汇总

CSS

CSS简介

HTML、CSS和JS的关系

CSS的作用

CSS基础

CSS基础语法

CSS样式规则

CSS注释

CSS使用方法

CSS样式的引用

CSS使用方法优先级

CSS选择器

标签选择器

类选择器

ID选择器

群组选择器

全局选择器

后代选择器

伪类

概念

链接伪类

伪类顺序

CSS继承和层叠

继承

层叠

CSS优先级规则

选择器权值

权值规则

!important规则

总结

CSS样式命名

CSS命名规则

常用CSS命名

注意事项

CSS文字和字体样式

CSS文字样式

字体：font-family

文字颜色： color

文字粗细: font-weight

文字样式: font-style

font-variant字体变形

CSS文本样式

水平对齐方式: text-align

文本行高: line-height

垂直方式: vertical-align

其他

CSS背景样式

设置元素的背景颜色

图像设置为背景

设置背景图像的起始位置

背景图像是否固定或者随着页面的其余部分滚动

背景图像是否重复

将背景属性设置在一个声明中

CSS列表样式

设置列表项标志的类型

将图像设置为列表项标志

设置列表中列表项标志的位置

用于把所有列表的属性设置于一个声明中

盒子模型

盒子模型概念

高和宽设置

边框设置

内边距设置

外边距设置

盒子的计算

CSS的float

CSS的定位

position属性的意义

position中的可选参数

层级

CSS的布局

行布局

多列布局

圣杯布局

双飞翼布局

你的赏识是我前进的动力