CSS 选择器
基本选择器grif
*通配符：匹配所有的html标记，所有吊机都会改变的
标签选择器：将其匹配指定的html标记
class选择器：给一类HTML标记加样式。这里所指的“一类”是：每个HTML标记都有一个class属性，且class的值一样。class属性是公共属性，每个HTML标记都有
id选择器：给指定id的元素添加样式。网页中HTML标记的id属性的值，必须是唯一的。
组合选择器
多元素选择器：给多个元素加同一个样式，多个选择器之间用“，”隔开
后代选择器
给某个标签的某个后代元素加样式，选择器之间用空格隔开
子元素选择器：给某个元素的子元素添加样式举例：div > h1.title{color:red;}
css尺寸属性
width：元素宽度，一定要加px单位
height：元素高度
css字体属性
font-size:字体大小
font-family:字体
font-style:斜体，取值：italic
font-weight:粗体，取值，bold
css文本属性
color:文本颜色
text-decoration:文本修饰线，取值：none(无)，underline(下划线)，overline(上划线)，line-through(删除线)
text-align:文本水平对齐方式，取值：left,center,right
line-height:行高，可以用固定值，也可以用百分比
text-indent:首行缩进
letter-spacing:字间距
CSS选择器——基本选择器(单个选择器)
1，通配符“*”：将匹配所有的HTML标记，只要<body>中存在的标记都会生效。
2,标签选择器：对应于HTML标记，有什么样的HTML标记，就有什么样的标签选择器。如：p{color:red;}
3，类选择器：给HTML标记中，class属性值相同的元素，添加样式。命名必须以“.”开头。如：.news{}
4，Id选择器：给HTML标记中，具有id属性的元素，添加样式。唯一性。命名以“#”开头。如：#news{}
CSS选择器——组合选择器(多个选择器)
1，多元素选择器：同时给多个元素添加样式，各个选择之间用逗号“,”分开。如：p,h1,#box{}
2，后代元素选择器：给某个元素的所有后代元素，添加样式。用空格隔开。如：#box h1{}
3，子元素选择器：给某个元素的子元素添加样式。用“>”隔开。如：#box > h1{}
一个超链接，有四个状态：
正常状态(:link)：鼠标没放上之前链接的样式。
放上状态(:hover)：鼠标放到链接上时的样式。
激活状态(:active)：按住鼠标左键不松开的样式，这个状态特殊短暂。
访问过的状态(:visited)：按下鼠标左键，并弹起，这时的样式效果。
在平常工作中，会使用以下写法，来给链接加不同的样式：
a:link, a:visited{ color:#444; text-decoration:none; } //将“正常状态”和“访问过的状态”合二为一。
a:hover{ color:#990000; text-decoration:underline; } //“鼠标放上”单做一种效果
list-style:列表样式，取值：none。去掉项目符号或者编号前面的各种符号
ul li{list-style:none;/*去除前面的符号*/}
css边框属性
border-left:左边框线
格式：border-left：粗细 线型 线的颜色
线型：none(无线) solid（实线） dashed(虚线) dotted(点状线)
举例：border-left:5px dashed red;
border-right:有边框
border-top:上边框
border-bottom：下边框
/*行内元素没有width和height属性
块级元素才有width和height的属性
*/
css内边距属性
padding-left:左内填充距离，左边先到内容间的距离
padding-right:右内填充距离，右边线到内容间的距离
padding-top:上内填充距离，上边线到内容间的距离
padding-bottom：下内填充距离，下边线到内容间的距离
缩写形式
padding：10px;//四个边的内填充分别为10px
padding:10px 20px;//上下为10px,左右为20px
padding:5px 10px 20px;//上为5px,左右为10px,下为20px
padding:5px 10px 15px 20px; //循序是：上右下左（顺时针）
css外边距属性
margin-left:左边线往外的距离
margin-right：右边线往外的距离
margin-top:上边线往外的距离
margin-bottom；下边线往外的距离
简写形式
margin:10px;//四个外边距分别为10px
margin:10px 20px;//上下外边距10px,左右外边距20px
margin:5px 10px 15px;//上外边距5px,左右外边距10px,下外边距15px
margin:5px 10px 15px 20px;//上右下左（顺时针方向）
css背景属性
background-color:背景颜色
background-image:背景图片 例：background-image:url(路径)
background-repeat:背景平铺方式。取值no-repeat(不平铺)，repeat-x(水平方向)，repeat-y(垂直方向)
background-position:背景定位，格式：background-position:水平方向定位，垂直方向定位
英文单词定位：background-position:left|center|right top|center|bottom;
用固定值定位：background-position:50px 50px;//背景距离容器的左边50px，容器的顶端50px
用百分比定位：background-position:50% 50%;//水平居中，垂直居中
用混合定位：background-position：left 10px;//背景靠左边齐，距离容器顶端10px
简写方式：
background:背景色 背景图 平铺方式 定位方式
举例：background:url(images/bg.gif) no-repeat center center;
举例：background: #ccc url(images/bg.gif) no-repeat left 10px;
css浮动和清除
float:让元素浮动，取值：left(左浮动)，right(右浮动)
clear:清除浮动，取值：left(清除左浮动)，right(清除右浮动)，both(同时清除上面的左右浮动)
1、CSS浮动
浮动的元素，将向左或向右浮动，浮动到包围元素的边上，或上一个浮动元素的边上为止。
浮动的元素，不再占空间了，并且，浮动元素的层级要高于普通元素。
浮动的元素，一定是“块元素”。不管它原来是什么元素。
如果浮动的元素，没有指定宽度的话，浮动后它将尽可能的变窄。因此，浮动元素一般要定宽和高。
一行的多个元素，要浮动一起浮动
2、CSS清除浮动
CSS清除浮动的功能有两个：(1)可以包围元素从“视觉上”包住浮动元素(2)清除之下的其它元素将恢复默认排版。
有浮动，就得有清除。
如果包围元素指定了高度了，那么可以不使用清除功能。
css优先级
行内样式》id选择器》class选择器》标签选择器
display属性
功能：规则网页元素如何显示的问题
取值：none(隐藏)，block（一块级元素显示），inline(以行内元素显示)
block:可以实现将行内元素转换成块级元素
inline:可以实现将块级元素转换成行内元素
overflow属性：当内容溢出时，该如何显示
取值：visible(可见)，hidden（隐藏），scroll(出现滚动条)，auto（自动）
cursor光标类型
取值：text(文本)，help(帮助)，wait（等待），pointer(手型)等。
css定位
position：元素定位方式
static:静态定位（默认状态，不定位）；
fixed:固定位置
relative:相对定位
absolute:绝对定位
定位方式要与定位属性配合使用
定位坐标：指定定位的元素，偏移目标元素多远的距离
left:定位元素，距离目标元素左边的距离
top:定位元素，距离目标元素上边的距离
right:定位元素，距离目标元素右边的距离
bottom：定位元素，距离目标元素下边的距离
css表格属性
border-collapse:表格边框线合并，取值：collapse
全局css设置
1、清除所有的标记的内外边距
body,ul,li,a,img,p,input{ margin:0; padding:0; }
2、去除项目符号或编号前面的符号
ul,ol,li{ list-style:none; }
3、全局链接效果
a:link , a:visited{color:#444;text-decoration:none;}
a:hover{color:red;}
4、网页中所有的文字大小颜色
body{ font-size:12px; font-family:宋体; color:#ccc; }
5、去除图片的链接边框线
img{border:0;}
6、全局的类样式
.floatL{ float:left; }
.floatR{ float:right; }
.clear{clear:both;}
.blank10{ height:10px; clear:both; }
.red{ color:red; }
.blue{ color:blue; }
版权属于：
小破孩
作品采用：
《
署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
》许可协议授权
评论