小白-css笔记

1.概念

层叠样式表（Cascading Style Sheet）

2.优势

内容与表现分离

网页的表现统一，容易修改

丰富的样式，使页面布局更加灵活

减少网页的代码量，增加网页的浏览速度，节省网络带宽

运用独立于页面的CSS，有利于网页被搜索引擎收录

3.选择器分类

标签选择器 p{font-size:16px;color:red;}

类选择器 .second{font-size:20px;color:#096;}

ID选择器 #third{font-size:24px;color:black;}

优先级顺序 ID选择器>类选择器>标签选择器

4.css样式

内联样式

内部样式表

外部样式表 <link href="style.css" rel="stylesheet" type="text/css" />

链接式 <link/>

导入式 @import

优先级：行内样式>内部样式表>外部样式表

5.CSS的字体样式

1）CSS的字体样式

设置字体类型：font-family:"隶书";

设置字体大小：font-size:12px;

设置字体风格：font-style:italic;

设置字体的粗细：font-weight:bold;

注：Font 在一个声明中设置所有字体属性 font:italic bold 36px "宋体";

2）文本样式

设置文本颜色：color:#00C;

设置元素水平对齐方式：text-align:right;

设置首行文本的缩进：text-indent:20px;

设置文本的行高：line-height:25px;

设置文本的装饰：text-decoration:underline;

设置文本居中：text-align:center;

3.CSS的背景样式

背景颜色：

背景图像： background-image:url(img/buy.png)

背景图像 - 水平或垂直平铺：background-reapt:noreapt;

6.CSS的列表样式及分类

列表分类

有序列表

<ol>

</ol>

无序列表

<ul>

</ul>

自定义列表

<dl>

<dt>title<dt>

<dd>content<dd>

</dl>

表格、表单
表格：

1）基本写法

<table>

<tr>

……

</tr>

……

</table>

2）表格的跨行和跨（列合并行和列）

跨列：<td colspan="3">学员成线</td> </tr>

跨行：<tr> <td rowspan="2">白杨</td>

7.表单

1）基本用法

<p><input type=”number” name=”phone”> </p>打电话

<p> input type=”radio” name=’’ radio’’ value =” ”</p>单选

<p> input type=”checkbox” name=”checkbox”value=”” </p>多选

<p> input type=”e-mail” name=”e-mai”</p>邮件

<p> input type=”file”</p>文件

<p> input type=”hidden” value=”123” name=”hidden”</p>隐藏

</form>

2）列表框

<select> name=”select” id=”sID”</select>

3）多行文本域

4）表单的高级应用

隐藏域type="hidden"

只读readonly="readonly"

禁用disabled="disabled"

8.CSS的高级选择器

名称

并集选择器多个选择器通过逗号连接而成，同时声明多个风格相同样式

交集选择器由两个选择器连接构成，选中二者范围的交集，两个选择器之间不能有空格，第一个必须是标签选择器，第二个必须是类选择器或者ID选择器

后代选择器外层的选择器写在前面，内层的选择器写在后面，之间用空格分隔，标签嵌套时，内层的标签成为外层标签的后代，子元素选择器通过>连接在一起而成，仅作用于子元素

属性选择器选取带有指定属性的元素，或选取带有指定属性和值的元素

9.插入css样式表

（1）外部样式表

<head>

</head>

浏览器会从文件文件名.css 中读到样式声明，并根据它来格式文档。

（2）内部样式表

<head>

<style>

hr{color:sienna;}

p {margin-left:20px;}

body {background-image:url("images/back40.gif");}

</style>

</head>

（3）内联样式表

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

9.盒子模型

1）边框（border)

边框样式（border-style)（盒子模型属性）

属性

说明

样式值

border-top-style

上边框样式

none：无边框

solid：实线边框

dashed：虚线边框

dotted：点状边框

double：双线边框

hidden：与none相同，应用于表解决边框冲突

……

border-right-style

右边框样式

border-bottom-style

下边框样式

border-left-style

左边框样式

border-style

设置四个边框样式

边框颜色（border-color）

border-top-color、border-right-color

border-bottom-color、border-left-color

border-color

十六进制

边框粗细（border-width）

border-top-width、border-right-width

border-bottom-width、border-left-width

border-width

关键字： thin、medium、thick

像素值：px

注：同时设置边框的颜色、粗细和样式

border-bottom: 9px #F00 dashed ;

border: 9px #F00 solid;

2）外边距（margin）

margin-top

margin-right

margin-bottom

margin-left

margin

Eg:margin-top: 1 px

margin-right : 2 px

margin-bottom : 2 px

margin-left : 1 px

margin :3px 5px 7px 4px;

margin :3px 5px;

margin :8px;

3)内边距（padding）

padding-left

padding-right

padding-top

padding-bottom

padding

4)计算盒子模型的尺寸

盒子实际高度=上下外边距+上下边框+上下内边距+内容高度

盒子实际宽度=左右外边距+左右边框+左右内边距+内容宽度

5)box-sizing属性

content-box

盒子的实际宽度和高度仅应用于元素内容，不包括内边距和边框

border-box

盒子的实际高度和宽度包括元素内容、边框和内边距

9.标准文档流

组成：块级元素

<h1>…<h6>、<p>、<div>、列表

内联元素

<span>、<a>、<img/>、<strong>...

10.属性

1)display属性

控制元素的显示和隐藏

块级元素与行内元素的转变

值	说明
none	设置元素不会被显示
block	元素会被显示为块级元素
inline-block	行内块元素

2)浮动—float属性

属性值	说明
left	元素向左浮动
right	元素向右浮动
none	默认值，元素不浮动

3)position属性

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

4)z-index属性

调整元素定位时重叠层的上下位置

z-index属性值：整数，默认值为0

设置了position属性时，z-index属性可以设置各元素之间的重叠高低关系