CSS
Posted Y_ZhiWen
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS相关的知识，希望对你有一定的参考价值。
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 spancolor:red;
>作用于元素的第一代后代，空格作用于元素的所有后代。- 子选择器
子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。（不包括孙子）
.food>liborder: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:hovercolor:red;分组选择符
当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：
h1,spancolor:red;
.first, #second spancolor: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
定位
.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:.....
以上是关于CSS的主要内容，如果未能解决你的问题，请参考以下文章
[ css 外边距 margin ] css中margin外边距合并问题讲解及实例演示