ccs知识点总结

介绍

• ccs主要用于网页的布局和格式、主要知识点选择器
• css：用一个单独文件设置统一样式大大提高了网页开发的效率

引入ccs

• 内联<style>*********8<style/>
• 外链   <link rel="stylesheet" type="text/css" href="myccs.css" />

选择器

- 选择器{
键（属性）：值；
键（属性）：值；
.
.
.
}

---选择器可以写：标签、便签名，'.类名'、 '#id名'  还可以一“属性”作为选择 eg:[属性=“值”]或者[属性]
注意在选择器中'空格'表示往下一层找

伪类选择器

格式： 选择器:first-letter{

}

• :first-letter 向文本的第一个字母添加特殊样式。
• :first-line 向文本的首行添加特殊样式。
• :before 在元素之前添加内容。
• :after 在元素之后添加内容。

层次选择器

• ‘空格’ ： 选择某标签下指定元素   eg：p a{} //选择p便签下所有的a便签
•  ‘>’  :   选择某标签下一层的指定元素    eg：p>a{} //选择p便签下第二层a便签
•   '+'    :  选择某标签下边（旁边）的元素，

类选择器

为一个便签指定对个类选择器：class="num1 num2 num3..."
使用通配符选择： * 通配所有字符

•  ^ 通配首写字符
•  $ 通配末尾字符格式： 选择器:first-letter{

}

css属性设置

1 css 层叠样式表


2 解决了一个问题：内容与表现的分离


3 样式的优先级：由低到高排列：
标签自带的样式
外部样式/内部样式,按照出现的先后顺序决定最后的样式，后出现的会覆盖之前出现的样式。
内联样式


4 样式的语法：
选择器 {
属性 : 属性值;
....
属性 : 属性值
}

5 选择器：
标签选择器 ： 标签名来选择 a, div, p, span
id选择器 ： id="XXXX" 选择id值为XXXX的标签 #XXXX
类选择器 ： class="YYYY" 选择class得值为YYYY的标签 .YYYY

继承关系： 空格 p span 表示选择p标签下所有的span标签
分组关系： 逗号 p, span, div 表示同时选择标签p，span和div
元素选择： 紧挨着的 p.aaaa, p#bbbb 表示p标签中具有类名为aaaa的和p标签中具有id为bbbb的p标签

属性选择器
[属性名]
[属性名=属性值]
[属性名~=属性值]
[属性名|=属性值]
[属性名^=属性值]
[属性名$=属性值]
[属性名*=属性值]

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

文本
color 设置文本颜色
line-height 设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。
text-indent 缩进元素中文本的首行。
text-transform 控制元素中的字母。 eg:转换成大写字母text-transform: uppercase
word-spacing 设置字间距。

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

链接 链接的四种状态：
    a:link - 普通的、未被访问的链接
    a:visited - 用户已访问的链接
    a:hover - 鼠标指针位于链接的上方

    a:active - 链接被点击的时刻

列表 ol ul li
list-style-type : 
list-style-image  : ulr()//自定义图标样式
list-style-position : outside / inside
list-style

表格
table
border-spacing//单元格与表格框之间的距离
border-collapse//单元格与单元格之间的距离
margin : 对齐方式//设置当前元素的在对齐、text-align设置子元素的对齐
margin-top
margin-right
margin-bottom
margin-left

width 

td th
border
border-color
border-width
border-style

padding
padding-top
padding-right
padding-bottom
padding-left

text-align
verticle-align

外边框
outline
outline-style
outline-color
outline-width

7 盒子模型(框模型)
一个元素由内容，内边距，边框，外边距组成
背景的设置不包括外边距。
边框要有样式才能指定宽度，否则是指定不了宽度和颜色的。

边框
border 简写属性，用于把针对四个边的属性设置在一个声明。

border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。

border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。//需记熟职位，新手不建议使用
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。

border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。

border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。

border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。

外边距
margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。

内边距
padding 简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom 设置元素的下内边距。
padding-left 设置元素的左内边距。
padding-right 设置元素的右内边距。
padding-top 设置元素的上内边距。