CSS及常用样式

CSS样式表

---

语法结构

第一种：该种样式表只能定义在style标签或css文件中，每个style标签或css文件可定义多个CSS样式表；

选择器 {
    declaration1;
    declaration2;
    …
}

第二种：该种样式表只能定义在style标签属性；HTML文档中每个标签都有一个style标签属性。

style= " declaration1; declaration2;…"

注意 ：
1、无论使用哪一种方式定义CSS样式表，样式表中的declaration都由一个样式属性和一个样式属性值组成，样式属性和样式属性值使用冒号分开；声明之间使用分号间隔。
2、如果一个样式属性有多个样式属性值，则样式属性值之间使用逗号间隔；
3、在CSS中样式属性及其样式属性值对大小写不敏感，且不忽略空格；
4、如果属性值由多个单词组成，则建议使用单引号引起来；

---

选择器

---

1、标签选择器

• 标签选择器以HTML文档中定义的标签名为选择器名。

标签名 {
    declaration1;
    declaration2;
    …
}

2、 类选择器

• 类选择器以标签中class标签属性的属性值为选择器名。

  注意：class标签属性的属性值不能以数字开头；

. class标签属性的属性值 {//注意前面的小点
    declaration1;
    declaration2;
    …
}

3、 id选择器

• id选择器以标签中id标签属性的属性值为选择器名。

注意：
1、id标签属性的属性值不能以数字开头；
2、id标签属性的属性值在HTML文档中必须唯一；class标签属性的属性值可以不唯一；

# id标签属性的属性值{
    declaration1;
    declaration2;
    …
}

4、 后代选择器

注意： 选择器之间用空格隔开。

父代选择器1 子父代选择器2 子父代选择器3 ….子代选择器 {
    declaration1;
    declaration2;
    …
}

5、分组选择器

• 由多个选择器组成，使用逗号分隔。
  如果HTML文档多个CSS样式表内的部分样式相同，则可以通过定义一个分组选择器抽取出来以简化CSS样式代码。

选择器1,选择器2,选择器3…{
    declaration1;
    declaration2;
    …
}

6、通配符选择器

• 通配符选择器等价于列出了HTML文档中所有标签的一个分组选择器。

*{  
    declaration1;
    declaration2;
    …
 }   
举例
*{ 
    margin:0px;
    padding:0px;
 }

CSS样表的继承性

1、子标签会继承父标签的CSS样式；
2、但如果子标签重新设置了父标签中的样式属性，则对于子标签来说以子标签中重新设置的样式属性为准，
3、尽管有可能子标签CSS样式在父标签CSS样式的前面。

---

如何使用CSS样式

---

在HTML中，插入CSS样式有3种方式：外部样式表，内部样式表，内联样式。

1、外部样式表

1、实现：将CSS样式写在css样式文件中，使用link标签将该css文件引入到HTML文档中。
2、时间：当多个HTML文档中某些标签的样式规则相同时，为了实现这些样式表的重用，同时也为了方便管理样式表，则需要将其声明在一个CSS样式表文件中。

2、内部样式表

1、实现：将CSS样式直接写在HTML文档中的style标签内。
2、时间：当一个HTML文档中的样式在其它HTML文档中不具有共性，但是本HTML文档中的多个标签的样式相同，这时为了实现这些样式规则的重用，同时也为了方便管理样式规则，则需要将其声明在内部样式表中。

3、内联样式表

1、实现：将CSS样式写在HTML文档某个标签的style标签属性的属性值中。
2、时间：当一个HTML文档中的某个标签样式与其他标签样式不相同，或者该文档中的标签样式与父标签样式不统一，则此时就需要声明内联样式。

---

CSS样式优先级

---

选择器

1、id选择器优先级最高，标签选择器优先级最低，如下所示：id选择器 > 类选择器 > 标签选择器。
2、注意：选择器优先级不考虑选择器的先后顺序

样式插入方式

内联样式优先级最高，外部样式表优先级最低，如下所示：内联样式 > 内部样式表 > 外部样式表。

---

常用CSS样式属性

---

1、边框样式属性——border

1、border—width：为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。（px为单位）
2、border—style：用于设置元素所有边框的样式，或者单独地为各边设置边框样式。（点状：dotted；虚线：dashed;实线：solid；没有：none)
3、border—color：用于设置一个元素的所有边框颜色，或者为4个边框分别设置不同的颜色。
注意：边框简写属性：border写出上下左右四个边的属性；
按照宽度、样式和颜色的顺序进行设置
{border:20px solid red;}

2、轮廓线样式属性——outline

注意：轮廓线是在标签边框边缘绘制一条线，该线不会占据空间，也不一定是矩形，主要起到突出标签的作用
与border基本类似，简写时刚好与其顺序相反
即outline-color、outline-style和outline-width）
{outline:red solid 20px;}

3、背景样式属性——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;

4、字体样式属性——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 宋体,华文彩云,楷体;}

5、文本样式属性

1、letter-spacing属性：设置字符间距，样式属性值可以为负值，但这时字符之间更加“拥挤”。
2、line-height样式属性：设置行间距（即行高），不能为负值。
3、text-align样式属性：设置标签内文本的水平对齐方式。
4、text-transform样式属性：设置文本的大小写。
5、text-indent样式属性：设定文本块中首行文本的缩进，如果样式属性值为负值，则首行会被缩进到左边。
6、text-decoration样式属性：设定文本装饰。比如是否有下划线及划线显示的位置。（underline，none，overline，line-through)

6、列表样式属性——list-style

顺序：
1、list-style-type：设置列表项标记的类型。
（dsic,circle,square,阿拉伯数字，罗马数字，英文字母等等）
2、list-style-position：设置列表项标记相对于列表项内容的位置。
（inside，outside）
3、list-style-image：将列表项标记设定为指定的图片，一般和一个 “list-style-type”样式属性一起使用，以防图片不可用。使用【url存储路径】图片得小。

7、超链接样式属性

• CSS 伪类用于向某些选择器添加特殊的效果。

选择器 : 伪类 {
    declaration1;
    declaration2;
    …
}

顺序：:link、:visited、:hover和:active

8、光标形状样式属性

cursor:pointer光标呈现为指示链接的指针（一只手）

9、内容溢出样式属性——overflow

• 可以出现滚动条 scroll
• overflow-x样式属性:当标签中的内容x方向溢出标签时，用于设定如何处理溢出的内容。
• overflow-y样式属性 :当标签中的内容y方向溢出标签时，用于设定如何处理溢出的内容。