Web前端学习(2)---Css(层叠样式表)

一:Css技术介绍:

Css是(层叠样式表),是用于增强网页控制并允许将样式信息与网页内容分离的一种标识性语言

语法规则:
选择器 p{属性:值;}

选择器:浏览器根据"选择器"决定css样式影响的HTML元素(标签).

属性(property):是你要改变的样式名,并且每个属性都有一个值,属性和值被冒号分开,并由花括号包围,这样 就组成了一个完整的样式声明(declaration),
eg. p{color:blue}

多个声明:如果定义不止一个声明,则需要用分号将每个声明分开.虽然最后一条的最后可以不加分号(但尽量 在每条声明的末尾都加上)eg:p{color:red; font:size:30px;}
注意:一般每行只描述一个属性

注释:/*xxxxxx */

二:CSS和HTML的结合方式

1)在标签的style属性上设置"key.value.value;",修改标签样式.

缺点:a),如果标签多了,样式多了.代码量非常庞大

b),可读性非常差

c),css没有什么复用性可言

2)在head标签中,用style标签中定义各种自己想要的css样式

格式如下:

xxx{Key:value value;} xxx:选择器

缺点:a)只能在同一页面内复用代码,不能再多个页面中复用css代码

b)维护起来不方便,在实际的项目中会有成千上万的页面,要到每个页面中去修改,工作量太大了.

3)把css样式写成一个单独的css文件,在通过link标签引入即可复用.

css语法:

标签 导入css样式文件.

三:选择器

1)id选择器(在style标签里面)

格式: #id 属性值{ 属性:值}
(不同的属性一定要用;隔开)

作用:id选择器,可以让我们通过id属性选择性的去使用这个样式.

2)class类型选择器

格式:

.class属性值{属性:值}

作用:可以通过class属性有效的选择性的去使用这个样式

3)组合选择器

格式:选择器1,选择器2,选择器n{属性:值;}

作用:组合选择器可以让多个选择器共用一个css样式代码

四:常用样式:

1),颜色:

格式: color:red;

颜色可以写颜色名如:black,blue,red,green等

颜色也可以写rgb值和十六进制表示值;如rgb(255,0,0),#00F6DE如果写十六进制必须加#

2)宽度

格式:width:19px;

宽度可以写像素值:19px;

也可以写百分比:20%;

3)高度

格式:width:19px;

高度可以写像素值:19px;

也可以写百分比:20%;

4)背景颜色

格式:background-color:#0F2D4C

5)字体样式:

color:#FF0000;字体颜色红色

font-size:20px;字体大小

6)红色1像素实现边框

border:1px solid red

7)div居中(指的是块居中)

margin-left:auto;

margin-right:auto;

8)文本居中:

text-align:center;

9)超链接去下划线

text-decoration:none;

10)表格细线

table{border:1px solid black;/设置边框/

border-collapse:collapse;/将边框合并/

}

td,th{border:1px solid black;/设置边框/}

11,列表去除修饰

ul{list-style:none;}