css设置图标居左_CSS基础

CSS基础

第一章

css基础语法

每个css样式由两部分组成，即选择符和声明，声明又分为属性和属性值。

属性必须放在花括号中，属性与属性值用冒号连接。每条声明用分号结束。属性值与属性值不分先后顺序。

选择符{属性：属性值;}

div{width:500px; height:500px;}

样式的建立：

1.内部样式(最好写在

中)

内部样式表(嵌套到页面中)

语法：

css语句

background:背景色

div{width:500px;height:500px; background:#096}

2.外部样式

a).外部样式表的创建

b).外部样式表的导入

1.先创建css文件

2.

3.设置css文件的样式

3.内联样式

内联样式(表行间样式，行内校长，嵌入式样式)

语法：标签>

优先级： 内联样式--->(内部，外部)

第二章 css选择符(选择器)

选择符的定义：选择符表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素。

常用的选择符有十种左右类型选择符，id选择符，class选择符，通配符，群组选择符，包含选择符，伪类选择符，伪对象选择符。

1.元素选择符/类型选择符/标签选择符(element选择器)

语法：元素名称{属性：属性值;}

类型选择符是根据html语言中的标记来直接定义

例：

div{ width:90px; height:90px; color:#000; background:#CF6;}

p{ color:#0C0;}  //让全部P标签都变颜色

我是一个p标签！！！

我是一个pp标签！！！

2.id选择器

语法：#id名{属性：属性值;}

说明：

1.使用id选择符时，要为每个元素定义一个id属性

2.id选择符的语法格式是 #top{width:300px;height:300px;}

3.一个id名称只对应一个具体元素对象

例 ：

#top{ color:#906;font-size:36px;} //font-size:36px;放大

我是一个p标签！！！

3.class 选择器

语法： .class名{属性：属性值;}

说明：

1.当我们使用类选择符时，应先为元素定义一个名称。

2.类选择符语法格式是

用法：class选择符更适合定义一类样式

例：

.top{ color:#906;font-size:36px;} //可以放在一个或者多个

我是一个p标签！！！

4.群组选择器

语法：选择符1，选择符2，......{属性：属性值;}

说明：当有多个选择符应用相同的样式时，可以将选择符用" , " 分隔的方式，合并为一组。

.top,#nav,p{width:11px;}

例：

.top1{ color:#906;font-size:36px;}

#top{ color:#906;font-size:36px;}

p{ color:#0C0;}

p,.top1,#top{ font-size:60px;} //群组标签可以让多个标签一起共享属性

ccsfefs

我是一个p标签！！！

5.包含选择器

语法:选择符1(父) 选择符2(子) {属性：属性值;}

说明：选择符1和选择符2 用空格隔开，含义就是选择符1包含的所有选择符2.

div ul li{height:200px;}

例：

ul li{ color:#C0C;}

• 我是包含选择器

6.通配符选择器

语法：*{属性：属性值;}

说明：通配选择符的写法是" * "，其含义就是所有元素标签。

用法：常用来重置样式。

*{ margin:0;padding:0;} 外边距

例：

*{ color:#060; margin:0; padding:0;} //所有的标签

7.伪类选择器

a:link{color:red} //未访问的链接状态

a:visited{color:green;}//已访问的链接状态

a:hover{color:blue;} //鼠标滑过链接状态

a:active{color:yellow;}//鼠标按下去时的状态

说明：

1.当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为：a,a:link,a:visited,a:hover,a:active,错误的顺序会使超链接的样式失效。

2.为了简化代码，把伪类选择符中相同的声明提出来放在a选择符中 a{color:red;} a:hover{color:green;}:表示其他有一种状态都相同，只有鼠标划过变化颜色。

例：

a: link{ color:red;}

a: visited{ color:yellow;}

a: hover{ color:blue;}

a: active{ color:#0F0;}

或者 a{ color:red;}

a:hover{ color:yellow}

请你点击我

选择符的权重

内联样式选择符  >  id选择符  >  class选择符  =  属性选择符  =  伪类选择符  =  伪元素选择符  >  类型选择符  >  子选择符  >  继承选择符

包含选择符：为包含选择符之和。

如果权重相同时，则执行后写的样式。因为后写的样式覆盖了前面的

css的注释：  /*       */

第三章 css核心属性和浮动

css属性组成和作用

属性：属性值

1.每个css样式都必须由两部分组成：选择符(Selector)和声明(Decleration)声明又包括属性(Properyt)和属性值(Value)

2.css属性：属性是指定选择符具有的属性，他是css的核心，css2共有15多个属性

3.css属性值：属性仁包括法定属性值和常规的数值加单位,div{width:400px;}

一. 文本文字属性

1.文本大小 ：{font-size:12px/14px/16px}

说明：

属性值为数值型时，必须加单位，为0时除外。默认为16px;

2.字体的类型

{ font-family:字体1，字体2}

当字体是英文字体的时候加"宋体"

3.文本颜色  ：{color:颜色值;}{background:250，0，0，1} 第4个值是背景色的深浅度

二. 列表属性

1. 定义列表符号样式：{list-style-type;}

说明