CSS样式表
语法结构:
第一种:该种样式表只能定义在style标签或css文件中,每个style标签或css文件可定义多个CSS样式表;
选择器 {
declaration1;
declaration2;
…
}
第二种:该种样式表只能定义在style标签属性;HTML文档中每个标签都有一个style标签属性。
style= " declaration1; declaration2;…"
注意 :
1、无论使用哪一种方式定义CSS样式表,样式表中的declaration都由一个样式属性和一个样式属性值组成,样式属性和样式属性值使用冒号分开;声明之间使用分号间隔。
2、如果一个样式属性有多个样式属性值,则样式属性值之间使用逗号间隔;
3、在CSS中样式属性及其样式属性值对大小写不敏感,且不忽略空格;
4、如果属性值由多个单词组成,则建议使用单引号引起来;
选择器
- 标签选择器:标签选择器以HTML文档中定义的标签名为选择器名。
标签名 {
declaration1;
declaration2;
…
}
类选择器:类选择器以标签中class标签属性的属性值为选择器名。
注意:class标签属性的属性值不能以数字开头;
. class标签属性的属性值 {//注意前面的小点
declaration1;
declaration2;
…
}
- id选择器:id选择器以标签中id标签属性的属性值为选择器名。
注意:
1、id标签属性的属性值不能以数字开头;
2、id标签属性的属性值在HTML文档中必须唯一;class标签属性的属性值可以不唯一;
# id标签属性的属性值{
declaration1;
declaration2;
…
}
- 后代选择器:
注意: 选择器之间用空格隔开。
父代选择器1 子父代选择器2 子父代选择器3 ….子代选择器 {
declaration1;
declaration2;
…
}
- 分组选择器:由多个选择器组成,使用逗号分隔。
如果HTML文档多个CSS样式表内的部分样式相同,则可以通过定义一个分组选择器抽取出来以简化CSS样式代码。
选择器1,选择器2,选择器3…{
declaration1;
declaration2;
…
}
- 通配符选择器:通配符选择器等价于列出了HTML文档中所有标签的一个分组选择器。
*{
declaration1;
declaration2;
…
}
举例
*{
margin:0px;
padding:0px;
}
CSS样表的继承性:
1、子标签会继承父标签的CSS样式;
2、但如果子标签重新设置了父标签中的样式属性,则对于子标签来说以子标签中重新设置的样式属性为准,
3、尽管有可能子标签CSS样式在父标签CSS样式的前面。
如何使用CSS样式
在HTML中,插入CSS样式有3种方式:外部样式表,内部样式表,内联样式。
外部样式表
1、实现:将CSS样式写在css样式文件中,使用link标签将该css文件引入到HTML文档中。
2、时间:当多个HTML文档中某些标签的样式规则相同时,为了实现这些样式表的重用,同时也为了方便管理样式表,则需要将其声明在一个CSS样式表文件中。内部样式表
1、实现:将CSS样式直接写在HTML文档中的style标签内。
2、时间:当一个HTML文档中的样式在其它HTML文档中不具有共性,但是本HTML文档中的多个标签的样式相同,这时为了实现这些样式规则的重用,同时也为了方便管理样式规则,则需要将其声明在内部样式表中。内联样式表
1、实现:将CSS样式写在HTML文档某个标签的style标签属性的属性值中。
2、时间:当一个HTML文档中的某个标签样式与其他标签样式不相同,或者该文档中的标签样式与父标签样式不统一,则此时就需要声明内联样式。
CSS样式优先级
选择器
1、id选择器优先级最高,标签选择器优先级最低,如下所示:id选择器 > 类选择器 > 标签选择器。
2、注意:选择器优先级不考虑选择器的先后顺序样式插入方式
内联样式优先级最高,外部样式表优先级最低,如下所示:内联样式 > 内部样式表 > 外部样式表。
常用CSS样式属性
边框样式属性——border
1、border—width:为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。(px为单位)
2、border—style:用于设置元素所有边框的样式,或者单独地为各边设置边框样式。(点状:dotted;虚线:dashed;实线:solid;没有:none)
3、border—color:用于设置一个元素的所有边框颜色,或者为4个边框分别设置不同的颜色。
注意:边框简写属性:border写出上下左右四个边的属性;
按照宽度、样式和颜色的顺序进行设置
{border:20px solid red;}轮廓线样式属性——outline
注意:轮廓线是在标签边框边缘绘制一条线,该线不会占据空间,也不一定是矩形,主要起到突出标签的作用
与border基本类似,简写时刚好与其顺序相反
即outline-color、outline-style和outline-width)
{outline:red solid 20px;}- 背景样式属性——background
1、background-color
2、background-image:设置标签背景图片(url(img))
3、background-repeat:设置标签背景图片重复模式。
分为none,no-repeat,repeat-x,repeat-y.
4、background-attachment:设置标签背景图片是否随着页面的其余部分的滚动而滚动。分为scroll(默认值滚动),fixed(图片不随着滚动)
5、background-position:设置标签背景图片位置。
6、background-origin:设置background-position样式属性设定的背景图片相对于什么位置来定位。
7、background-clip:指定背景绘制区域。
8、background-size:设置单张背景图片的尺寸,默认值为auto。
**简写时没有顺序要求**4、6、7、不常用
“background: url("../img/headbg.jpg") repeat-x left bottom;
background-image: url("../img/icon.png");
background-repeat: no-repeat;
background-position: -45px -200px;
- 字体样式属性——font
顺序:中间用空格隔开
1、font-style:设定字体的风格。(正常:normal;斜体:Italic)
2、font-variant:设定是否以小型大写字母的字体显示文本(不常用)
3、font-weight:设置字体的粗细(bold加粗;normal正常)
4、font-size/line-height:设置字体大小(px为单位)
5、font-family:设置字体系列,使用逗号分割每种字体。如果浏览器不支持第一个字体则会尝试第二个字体;如果字体系列中的所有字体都不支持,则使用浏览器默认支持的字体。
{font:Italic bold 14px 宋体,华文彩云,楷体;}
文本样式属性
1、letter-spacing属性:设置字符间距,样式属性值可以为负值,但这时字符之间更加“拥挤”。
2、line-height样式属性:设置行间距(即行高),不能为负值。
3、text-align样式属性:设置标签内文本的水平对齐方式。
4、text-transform样式属性:设置文本的大小写。
5、text-indent样式属性:设定文本块中首行文本的缩进,如果样式属性值为负值,则首行会被缩进到左边。
6、text-decoration样式属性:设定文本装饰。比如是否有下划线及划线显示的位置。(underline,none,overline,line-through)列表样式属性——list-style
顺序:
1、list-style-type:设置列表项标记的类型。
(dsic,circle,square,阿拉伯数字,罗马数字,英文字母等等)
2、list-style-position:设置列表项标记相对于列表项内容的位置。
(inside,outside)
3、list-style-image:将列表项标记设定为指定的图片,一般和一个 “list-style-type”样式属性一起使用,以防图片不可用。使用【url存储路径】图片得小。超链接样式属性:CSS 伪类用于向某些选择器添加特殊的效果。
选择器 : 伪类 {
declaration1;
declaration2;
…
}
顺序::link、:visited、:hover和:active
光标形状样式属性
cursor:pointer
光标呈现为指示链接的指针(一只手)内容溢出样式属性——overflow(可以出现滚动条 scroll)
•overflow-x样式属性:当标签中的内容x方向溢出标签时,用于设定如何处理溢出的内容。
•overflow-y样式属性 :当标签中的内容y方向溢出标签时,用于设定如何处理溢出的内容。