CSS新手学习心得

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四个方向相对于自身位置进行相对定位
思维导图