css基础总结

 css作用：控制网页的样式

 

css语法：

选择符{

属性1：属性值；

属性2：属性值；

属性3：属性值1 属性值2 属性值3；

}

 

css实例：

div{

width:300px;

height:400px;

background:red;

}

 

css语法解释：

1、选择符：对标签进行获取

2、所有声明都放在大括号里面，声明和声明之间用分号（“；”）连接

3、声明包括属性及属性值，属性和属性值之间用冒号连接

4、如果一个属性拥有多个属性值，属性值之间用空格隔开

例：border（边框）:10px(像素大小) red（颜色） solid（线的类型）;

注：所有的css代码，必须放在“css样式表”内！！！

扩展：css样式表内的注释：/* css的注释 */

 css样式表 

css样式表：

一、内部样式表：

创建方法：使用style标签创建样式表,然后把样式表最好放在head描述区内

<style type="text/css"(可以省略)>

css代码

</style>

二、外部样式表：

创建方法：新建一个.css文件

外部导入方式：

1、<link rel="stylesheet" href="url">

rel="stylesheet" //创建关联性

href="url" //导入的路径

type="text/css" //css文本类型

2、<style>

@import url（路径）;

</style>

link 和 @import 区别

1、本质区别：link标签属于html语言、@import属于css提供的一个方法

2、加载顺序的差别：link导入的css 和 结构同时加载、@import需等结构加载完毕然后再加载css样式

3、兼容性差别：@import兼容性不好（ie5）

4、js动态dom操作差别：js动态可能无法修改@import所导入的css样式

三、内联样式表

创建方：

<标签 style="css代码"></标签>

 

 样式表的权重关系

内联样式表权重最高

内部样式表和外部样式表的权重关系和书写的顺序有关，写在后面的权重高

后面的把前面的样式覆盖，覆盖的只是相同属性，不同属性继续执行

注：内联样式表只对当前标签起作用

 

 css选择符 

css选择符的目的：对网页的元素进行获取

 

一、类型选择符（标签选择符）

html中所有标签懂能直接作为选择符 (div、p、h1-h6......)

特点：能选择页面中所有相同类型的元素

应用：

1、如果想统一某个标签样式的时候

2、想改变某个默认样式的时候

 

二、id选择符

语法：

<标签 id="名称"></标签>

id样式表写法：#名称{css代码}

特点：id名称在同一页面只能出现一次，唯一性

应用：id名称常用来写页面的外围结构

 

三、class选择符

语法：

<标签 class="名称"></标签>

.名称{css代码}

特点：

每一个元素都可以拥有多个类名

适合定义一类样式

 

四、群组选择符

语法：

以逗号“，”分隔的方式，把多个选择符组成一组

选择符1，选择符2，选择符3{css代码}

例： #box,.cont,p{ }

 

五、包含选择符（子选择符）

语法：

通过父元素找子元素，父元素与子元素之间用空格隔开

父元素选择符 子元素选择符{ }

 

六、伪类选择符

a:link{} 超链接初始状态

a:visite{} 超链接访问过后的状态

a:hover{} 超链接鼠标滑过的状态

a:active{} 超链接按下时的状态

例：

a:link{color:purple;}

a:visited{color:pink;}

a:hover{color:yellow}

a:active{color:green}

注：顺序不能更改

常用形式：

a{color:red}

a:hover{color:yellow;}

div:hover{}

.box:hover{}

鼠标滑过父元素改变子元素的样式：

父元素：hover 子元素{}

 

七：通配符

语法：

*{} 用来改变页面所有元素的样式，通常用来清除元素的留白

常用方法：

*{

margin:0;

padding:0;

}

选择符权重 

 

!important > 内联样式表 > id > class（伪类）> 类型（ 标签 ）

 

内联样式表 ： 1000

id : 100

class/伪类 : 10

类型 : 1

包含选择符 ： 为选择符权重之和

群组选择符 ： 权重保持不变

 

扩展：

!important ( 如果一个css属性后面有!important,当前属性具有最高权重。 )

语法：

属性：属性值！important;

 

 css层叠性

 

只要产生权重关系，必然体现css层叠性

权重高的覆盖权重低的，权重相同的优先执行后书写的

 

 文本属性 

 

font-size: 像素

　　网页中文本默认大小： 16px;

　　注：文本大小一般都是偶数、pc端文本大小最小别低于12px；

　　涉及到的单位：

　　px

　　pt

　　em 1em == 16px( 默认情况下 ) （ 相对大小、相对于父元素font-size的值 ）

line-height: 行高

　　如果line-height的值等于容器高度的时候，实现单行文本垂直居中对齐

font-family: 字体 默认的字体 ： 微软雅黑

　　宋体、楷体、微软雅黑......安全字体（大部分浏览器能支持的）

　　注：

　　如果字体为中文： 放在引号里面

　　如果英文字体字体名称是多个单词的时候， 放在引号里面

　　如果有多个字体，字体和字体之间用逗号隔开； 英文在前中文在后

color： 文本颜色

　　颜色：必须使用十六进制表示颜色值。

　　16进制数字（ 0-9 a-f ）

　　#000000 #000

　　#ffffff #fff

　　红绿蓝 0带表最暗 f代表最亮

　　扩展：

　　rgb(255,0,0)模式

　　rgba(255,0,0,0.5) a 颜色值透明。

　　transparent 透明色

font-weight:

　　属性值：bold（加粗） bolder（更粗的） normal（常规） 100 - 900

font-style:

　　属性值: italic（倾斜） oblique（更倾斜） normal（常规）

font-variant:

　　属性值：normal small-caps（缩小的大写）

text-align: 文本的水平对齐方式

　　属性值： left right center justify(两端对齐)

text-decoration

　　属性值：none underline（下划线） overline（上划线）

　　line-through（删除线） blink(闪烁，高版本不支持)

text-indent:

　　首行缩进: text-indent:2em;

　　悬挂式缩进： text-indent:负数

letter-spacing:30px;

　　字符与字符之间的间距

word-spacing:30px;

　　词与词之间的间距（依据空格判断）

text-transform:

属性值:

　　capitalize ( 首字母大写 )

　　uppercase ( 大写 )

　　lowwercase (小写)

 

 列表属性

 

list-style-type: disc(实心圆) 定义列表符号样式

list-style-image：url 使用图片作为列表符号

list-style: none 清除列表符号！

list-style-position: outside(外边)/inside(里边) 使用图片作为列表符号

 

 边框属性 

 

 

border:10px solid red; 复合式写法（简写）

border-width:10px;

border-style:线形；

border-color:颜色

常用的线型：solid( 实线 ) dashed (虚线) dotted( 点状线 ) double(双线) none/0

给单一方向设置边框

　　border-left/right/top/bottom ： 10px solid red

border设置方法：

　　border复合式写法的后面的3属性值，可单独拆分出来。

　　单独拆分出来的属性例如：border-width:

　　border-width:10px; 四周

　　border-width:10px 20px; 上下 左右

　　border-width:10px 20px 50px 上 左右 下

　　border-width:10px 20px 50px 100px 上右下左

 

背景属性 

 

1: background-color:颜色值 ( 背景色一直会平铺到边框区域 )

2: backgrond-image:url(); 背景图

默认情况下背景图的展示形式：

容器大于背景图 -> 铺满

容器等于背景图 -> 显示一张

容器小于背景图 -> 只显示容器区域

3：background-repeat:

属性值： no-repeat 不平铺

repeat

repeat-x

repeat-y

4:background-position 控制背景图的位置

属性值：两个属性值 第一个水平位置（距离左侧的距离） 第二个垂直位置（ 距离顶端的距离 ）

background-position:100px 100px;

background-position:right bottom

background-position:center bottom

5:background-attachment 控制背景图是否固定 ( 滚动条 )

属性值：scroll fixed;

简写：

background:red url（） no-repeat left right;

网页中的图片的展示形式： img导入的图片(占空间) 背景图（不占空间）

 

css浮动属性

 

语法：float:none/left/right;

添加浮动的元素，不占据空间、脱离文档流

注：只要有浮动，父元素 一定添加高度、否则父元素会出现” 高度塌陷 “

 

盒模型

 

一、padding用法：

1：padding是在盒子里面，在盒子与内容之间。

2：padding的作用：控制子元素在父元素里面的位置关系。

3：padding会把盒子撑大。

4：如果想让盒子保持原有的大小：在宽高基础上减掉padding值。（ 如果一个元素是被内容撑开的，没有设置固定的宽高，padding直接撑开。不用减掉 ）

5:如果给单一方向添加padding值

　　padding-top/bottom/left/right

6:padding的设置特点：

　　padding:30px; 四周

　　padding:10px 30px; 上下 左右

　　padding:10px 30px 50px 上 左右 下

　　padding:10px 30px 50px 100px 上右下左

7:padding不会对背景图的位置造成影响。

二、margin用法： 外边距

1、margin在元素的外围，不会改变元素的大小

2、作用：控制元素之间的距离

3、给单一一方向添加margin：同上（padding）

4、margin的设置特点：同上（padding）

5、margin：0 auto; 左右居中

6、margin常出现的bug

　　a:两个相邻的元素上下margin值，不会叠加，按最大值