CSS中文名为层叠样式表,全称为Cascading Style Sheets,是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
CSS的特点
1、继承:
网页中子元素,将继承父元素的样式
例如:要控制段落p中的文字大小,可以直接给body标记加样式。
2、层叠:
网页中子元素定义了与父元素相同的样式,则子元素的样式将覆盖掉父元素的样式
后面定义的样式,会覆盖前面定义的样式
语法:选择符{属性:值}
例:body{font-size:12px;}
css有四种引入方式
1、内嵌式引入
把style标签嵌套在head标签中
2、行内样式
3、外链样式
把css当成是一个文件,通过link标签引入到html中
4、嵌入样式
内嵌和外链一种综合性的使用
会显示哪种样式 取决于哪种样式离修饰的目标越近
选择符
1.标签选择符:通过标签的名字来命名的
body{color:red;} p{color:red}
对html中的所有该标签都起作用
2.id选择器: 当标签中出现id属性的 那么可以使用id选择器
Id选择器 通常应用于某些标签中独有的样式
Id选择器的标识 是#
3.类选择器:当标签中出现class属性的时候 那么可以使用类选择器
类选择器 通常应用于某几个标签具有相同的样式
4.全选择器 使用*号来表示 对整个html中的所有标签都起作用
包含选择符:嵌套 中间用空格间隔 包含选择符的标识是空格
分组选择符 多个选择符同时具备同一种样式 使用分组选择符 标志 ,(逗号)
标签指定式选择符: 中间不会存在任何符号
组合选择符: 把前面7种选择符 综合的使用在一起
控制字体
1、设置字号font-size
2、设置字色color
3、设置字体font-family
4、设置行高
line-height % em
5、设置字体的粗细
font-weight
控制文本
例:大小写控制
Text-align 它只能控制文本是否居中 不能控制div是否居中
如果想让div居中 要通过盒子模型中margin:0 auto;
所有的网页都要有hn标签 利于搜索引擎搜索
text-indent:-9999em;去隐藏页面的标题。
Text-transform 用于大小写字母转换
伪类
例
盒子模型
内边距 padding 用于填充内容内部
外边距 margin 用于描述浏览器边缘到内容的之间的距离
边框 border:1px solid black
像素值 实线 颜色
Margin:100px 上下左右都是100px的距离
Margin:100px 200px; 上下100px、左右 200px
Margin:100px 200px 300px 上100px 左右 200px 下300px
Margin:100px 200px 300px 400px 上、右、下、左
Margin-top margin-left margin-right margin-bottom
边框也适用于4个方向
块状元素和内联元素
块状元素 具有高度和宽度的属性,但是它不允许其他元素和它同行显示
代表标签 div p 等等
块状元素的默认属性: display:block;
内联元素 不具有宽度和高度的属性 允许其他元素与其同行显示
代表标签 a span
内联元素的默认属性 display:inline;
块状元素和内联元素之间可以进行转换
Display:none 可以隐藏元素
控制背景
背景颜色
背景图像
浮动是css实现布局的一种方式,包括div在内的任何元素都可以以浮动的方式进行显示。
值:
none:不浮动
left:对象向左浮动,而后面的内容流向对象的右侧
right:对象向右浮动,而后面的内容流向对象的左侧
Left:
前面的元素浮动效果后,会对后面的元素产生影响
清除浮动
当元素有浮动属性时,会对其父元素或后面的元素产生影响,会出现一个布局错乱现象,可以通过消除浮动的方法来解决,浮动元素的影响
浮动的清理(clear)
值:
none:默认值。允许两边都可以有浮动对象
left:不允许左边有浮动对象
right:不允许右边有浮动对象
both:左右两侧不允许有浮动对象
定位布局
属性:positon
描述:设置对象的定位方式
值:
static 静态定位:页面中的每一个对象的默认值。
absolute 绝对定位:将对象从文档流分离出来,通过设置left、right、top、bottom四个方向相对于父级对象进行绝对定位。如果不存在这样的父对象,则依据body对象。
relative 相对定位:对象不从文档中分离,通过设置left,right,top。bottom四个方向相对于自身位置进行相对定位
思维导图