CSS
2016-05-29 10:42
645 查看
CSS
—-分离网页内容结构和格式控制W3C CSS
使用
css语法结构由3部分组成：选择符、样式属性、值选择符：选择要修饰的对象，可以使HTML的标签，也可以是特定id、class的标签
属性：颜色、大小，定位、浮动方式
值：属性值
语法：选择符{样式属性:值; 样式属性:值; ...}添加CSS方法
链接外部样式表
内部样式表
导入外部样式表
内嵌样式
1、链接外部样式表
<head> <link rel=stylesheet type=text/css href=slstyle.css > </head>
2、内部样式表
<head>
<style type="text/css">
body{
margin-left:0px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
}
.style1{
color:#fbe333;
font-size:12px;
}
</style>
</head>3、导入外部样式
指在内部样式表的<styple>中使用@import导入外部样式表 <head> <style type="text/css"> @import slstyle.css </style> </head>
4、内嵌样式
<table style=color:red; margin-right:220px>
选择器
选择器：css样式声明定义
选择器{
样式;
}标签选择器
h1{
...;
}
h1,p,body{
....;
}通用选择器
它使用一个（*）号指定，它的作用是匹配html中所有标签元素
* {color:red;}类选择器
.类选器名称{css样式代码;}
h1.类选择器{ ...; }
*.类选择器{ ...; }
<span class="stress">胆小如鼠</span>多类选择器
.类1.类2{ ...; }
.important.warning {background:silver;}
<p class="important warning">
This paragraph is a very important warning.
</p>
<p class="important urgent warning">
This paragraph is a very important and urgent warning.
</p>ID选择器
在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：
1、为标签设置id=”ID名称”，而不是class=”类名称”。
2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。
ID选择器和类选择器区别：
相同点：可以应用于任何元素
不同点：
ID选择器只能在文档中使用一次
可以使用类选择器词列表方法为一个元素同时设置多个样式。
<span class="stress bigsize">三年级</span>
什么时候用id，什么时候用class?
W3C标准这样规定的，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。这样，一般网站分为头，体，脚部分，因为考虑到它们在同一个页面只会出现一次，所以用id，其他的，比如说你定义了一个颜色为red的class，在同一个页面也许要多次用到，就用class定义。另外，当页面中用到js或者要动态调用对象的时候，要用到id，所以要根据自己的情况运用。自己的语言
#intro {font-weight:bold;} 等价 *#intro {font-weight:bold;}属性选择器
*[属性]{ ...; }
*[title] {color:red;} 应用<h2 title="Hello world">Hello world</h2>
a[href] {color:red;} 应用<a href="http://w3school.com.cn">W3School</a>
a[href][title] {color:red;} 需同时拥有这两个属性
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;} 可以设定值，不能应用于其他值中
p[class="important warning"] {color: red;}
还可以匹配属性的开头，结尾等包含（后代）选择器
包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：
.first span{color:red;}
>作用于元素的第一代后代，空格作用于元素的所有后代。子选择器
子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。（不包括孙子）
.food>li{border:1px solid red;}
可结合后代选择器：
table.company td > p
相邻兄弟选择器
h1 + p {margin-top:50px;}
选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素,用一个结合符只能选择两个相邻兄弟中的第二个元素
结合其他选择器:
html > body table + ul {margin-top:20px;}伪类选择符
它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{color:red;}
分组选择符
当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：
h1,span{color:red;}
.first, #second span{color:green;}属性
字体
.font_css{
font-family:"宋体","黑体",...; // 类似<font face> ,宋体不支持，则黑体，否则系统默认字体
font-size:12px // 还支持 xx-small ...
font-style:normal / italic / oblique
font-weight:normal / bold / bolder / lighter / 自定义数字
font-variant:normal / small-caps(小写英文转大写英文)
font:bold italic "宋体"
}颜色背景
.back_css{
color:#fff098
background:#ffff00
backgroun-image:url(images/ber_12.gif(地址))
background-repeat:no-repeat / repeat / repeat-x / repeat-y // 背景平铺方式
background-attachment:scroll / fixed // 设置背景是否随对象滚动
background-position:0% 50% / left top (center right bottom)
}段落
.paragraph_css{
word-spacing:3px / -1px //单词间隔
letter-spacing:3px / -1px // 字符间隔
text-decoration:none / underline / overline / line-through / blink // 文字修饰，下划线...
vertical-align:baseline / sub / super / top / text-top middle / text-bottom // 垂直对齐方式
text-align:left / right / center / justify(两端对齐)
text-transform:none / capitalize / uppercase / lowercase
text-indent:25px // 文本缩进
line-height:12px // 文本行高
white-space:normal(默认，将多个空格合并) / pre (保留) // 处理空格
direction:ltr / rtl / inherit
}外边距内边距
外边距：元素周围边界宽度内边距：边框与元素的间距
盒子模型
- 组成：Content（内容）、padding（内边距）、border（边框）、margin（外边距）
- Content：属性有width、height、overflow
- padding：内容区与边框之间的空间，属性有padding-top、padding-bottom、padding-left、padding-right
- border：属性有：border-style、border-width、border-color
- margin：边框外的空间，属性有margin-top、margin-bottom、margin-left、margin-right
CSS 外边距合并
定位
.pos_css{
position: static / absolute / fixed / relative
top:
right:
bottom:
left:
}。。。。。。。。。。。。。。。。。。。。
列表
ol{
list-style-type:disc / circle / sqare / ..
list-style-image:url(path)
list-style-position:outside / inside // 列表缩进
}光标
ol{
..
cursor:.....
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 