首页 > > 网页制作 > css >

CSS基本知识点(01)

2018-06-24 01:45:10来源：未知阅读 ()

1、样式表

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

　　优先级：内联样式表 > 内部样式表 > 外部样式表 > 浏览器缺省设置

2、选择器
　　selector {property: value;property: value;......}

　　1、标签选择器：
　　　　h1 {}

　　2、id选择器：
　　　　#red {color:red;}
　　　　<p id="red"></p>

　　　　div#red{}

　　3、类选择器：
　　　　.center {text-align:center;}
　　　　<h1 class="center"></h1>
　　　　<p class="center"></p>
　　　　(01)
　　　　div.red{}
　　　　(02)
　　　　.important {font-weight:bold;}
　　　　.warning {font-style:italic;}
　　　　.important.warning {background:silver;}

　　　　<p class="important warning">This paragraph is a very important warning.</p>

　　4、属性选择器：
　　　　[title]
　　　　{
　　　　　　color:red;
　　　　}
　　　　<h2 title="Hello County">Hello World</h2>
　　　　(02)
　　　　a[href][title] {color:red;}

　　　　1、属性和值选择器：
　　　　[title=w3school]
　　　　{
　　　　　　color:red;
　　　　}
　　　　<h2 title="w3school">Hello World</h2>

　　　　2、属性和值选择器(多个值)：
　　　　[title~=w3school]
　　　　{
　　　　　　color:red;
　　　　}
　　　　<h2 title="w3school">Hello World</h2>
　　　　<h2 title="hello w3school">Hello World</h2>

　　　　3、表单选择器：
　　　　input[type="text"]
　　　　{
　　　　　　width:150px;
　　　　}

　　5、多样

　　　　1、派生选择器：
　　　　　　li strong {} ：li标签下所有的strong元素

　　　　　　注：div#red{} td.center{} 跟 div #red{} td .center{} 是有区别的。

　　　　2、子元素选择器：
　　　　　　h1 > strong {} ：只能是li标签子元素下的strong，其他strong不行

　　　　3、相邻兄弟选择器:
　　　　　　h1 + p {} ：选择紧接在 h1 元素后出现的p，h1 和 p 元素拥有共同的父元素

　　　　4、分组选择器：
　　　　　　h1,h2,h3,...{} ：这几个h标签共用一些属性

　　　　5、伪类
　　　　　　selector : pseudo-class {property: value}
　　　　　　注：后面详细介绍

3、CSS背景

　　属性　　　　　　　　　　    描述
　　background 　　　　　　　　    简写属性，作用是将背景属性设置在一个声明中。
　　background-attachment 　　　　背景图像是否固定或者随着页面的其余部分滚动。
　　background-color　　　　　　    设置元素的背景颜色。
　　background-image　　　　　　把图像设置为背景。
　　background-position　　　　　   设置背景图像的起始位置。
　　background-repeat 　　　　　　设置背景图像是否及如何重复。

4、 CSS文本

　　属性　　　　　　　　描述
　　color 　　　　　　　　设置文本颜色
　　direction 　　　　　　设置文本方向。
　　line-height　　　　　设置行高。
　　letter-spacing 　　　　设置字符间距。
　　text-align 　　　　　　对齐元素中的文本。
　　text-decoration　　　　向文本添加修饰。
　　text-indent 　　　　　缩进元素中文本的首行。
　　text-transform 　　　　控制元素中的字母。
　　unicode-bidi 　　　　设置文本方向。
　　white-space 　　　　设置元素中空白的处理方式。
　　word-spacing 　　　　设置字间距。

5、CSS字体

　　属性　　　　　　描述
　　font 　　　　　　简写属性。作用是把所有针对字体的属性设置在一个声明中。
　　font-family 　　设置字体系列。
　　font-size 　　　　设置字体的尺寸。
　　font-style 　　　设置字体风格。
　　font-variant 　　以小型大写字体或者正常字体显示文本。
　　font-weight 　　设置字体的粗细。

6、CSS链接

　　a:link - 普通的、未被访问的链接
　　a:visited - 用户已访问的链接
　　a:hover - 鼠标指针位于链接的上方
　　a:active - 链接被点击的时刻

　　当为链接的不同状态设置样式时，请按照以下次序规则：
　　a:hover 必须位于 a:link 和 a:visited 之后
　　a:active 必须位于 a:hover 之后

　　text-decoration 属性大多用于去掉链接中的下划线

7、CSS列表属性(list)

　　属性　　　　　　　　描述
　　list-style 　　　　　　简写属性。用于把所有用于列表的属性设置于一个声明中。
　　list-style-image 　　　将图象设置为列表项标志。
　　list-style-position 　　设置列表中列表项标志的位置。
　　list-style-type　　　　设置列表项标志的类型。

8、CSS表格属性(Table)

　　属性　　　　　　　　描述
　　border
　　border-collapse 　　    设置是否把表格边框合并为单一的边框。
　　border-spacing　　    设置分隔单元格边框的距离。
　　caption-side　　　　    设置表格标题的位置。
　　empty-cells 　　　　设置是否显示表格中的空单元格。
　　table-layout 　　　　设置显示单元、行和列的算法。

9、盒子模型

　　margin：外边距
　　外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
　　padding：内边距
　　border：边框
　　border-style、border-color、border-width
　　内容

10、CSS定位(position)

　　1、相对定位(relative)
　　　　1、占用文档流
　　　　2、是基于原来文档流中的位置
　　　　3、以边框为基准
　　2、绝对定位(absolute)
　　　　1、脱离文档流
　　　　2、是以浏览器窗口为基本位置
　　　　3、以边框为基准
　　3、fixed
　　　　相对于窗口的定位
　　4、浮动(float)
　　　　1、脱离文档流
　　　　2、会把内容挤掉
　　　　clear：
　　　　清除前面的元素浮动对后面元素的影响
　　5、relative和absolute混用
　　　　1、元素作为容器时，设置为relative，其内部元素如果是absolute，内部元素以容器为基准