您的位置:首页 > Web前端 > CSS

2.1 CSS一些常见的属性&&选择器

2017-05-04 23:08 721 查看

cascading style sheet

css是cascading style sheet 层叠式样式表的简写。

一些常见的属性

字符颜色:

color:red;


color属性的值,可以是英语单词,比如red、blue、yellow等等;也可以是rgb、十六进制。


字号大小:

font-size:40px;


font就是“字体”,size就是“尺寸”。px是“像素”。
单位必须加,不加不行。


背景颜色:

background-color: blue;


background就是“背景”。


加粗:

font-weight: bold;


font是“字体” weight是“重量”的意思,bold粗。


不加粗:

font-weight: normal;


normal就是正常的意思


斜体:

font-style: italic;


italic就是“斜体”

不斜体:font-style: normal;


下划线:

text-decoration: underline;


decoration就是“装饰”的意思。


没有下划线:

text-decoration:none;


基础选择器

标签选择器

body {
font-family: "Microsoft YaHei UI", serif;
font-size: 14px;
}


id选择器

#表示选择id

同一个页面内id不能重复

#a {
font-family: "Microsoft YaHei UI", serif;
font-size: 14px;
}


类选择器

.表示选择类。

类可以重复

.a {
font-family: "Microsoft YaHei UI", serif;
font-size: 14px;
}


后代选择器

空格就表示后代

div .a {
font-family: "Microsoft YaHei UI", serif;
font-size: 14px;
}


交集选择器

交集选择器没有空格。

div.a {
font-family: "Microsoft YaHei UI", serif;
font-size: 14px;
}


并集选择器(分组选择器)

用逗号就表示并集。

div,a {
font-family: "Microsoft YaHei UI", serif;
font-size: 14px;
}


通配符*

*就表示所有元素。

效率不高,如果页面上的标签越多,效率越低,所以页面上不能出现这个选择器。

* {
margin: 0;
padding: 0;
}


儿子选择器

IE7开始兼容,IE6不兼容。

div>p{
color:red;
}


序选择器

IE8开始兼容

选择第1个li:

ul li:first-child{
color:red;
}


选择最后一个1i:

ul li:last-child{
color:blue;
}


下一个兄弟选择器

IE7开始兼容

+表示选择下一个兄弟

h3+p{
color:red;
}


哪些属性能继承?

color、 text-开头的、line-开头的、font-开头的。

这些关于文字样式的,都能够继承; 所有关于盒子的、定位的、布局的属性都不能继承。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: