4-CSS-选择器-一般属性

CSS简介

CSS（cascading style sheets）

CSS的主要目的：是给HTML标记添加各种各样的表现样式（格式）。如：文字样式、背景、文本样式、链接样式。。。

提示：CSS是给HTML标记加的样式；JS是给HTML标记加的行为。先有标记，后有样式或行为。

CSS注释：/*xxx*/

语法格式：选择器{属性：值；属性：值；}

• 一个CSS规则，由“选择器”和“格式声明语句”构成
• “选择器”：就是选择HTML标记，换句话说：就是给哪个HTML标记加样式
• “格式声明语句”：由{}构成，{}中是各种格式语句。
• 一条格式语句，由“属性名：属性值”构成，必须以英文下分号“;”结束
• 属性名，就是CSS中的各种属性，这些属性名是固定的。属性值，一个属性名可以去不同的值，这个值不加引号。
• CSS中的数字单位圣斗士px，这个px不能省略。

CSS选择器

1、基本选择器

 （1）“ * ”选择器：通配符

•  描述：将匹配所有的HTML标记，所有的标记都会改变。
•  语法格式：* {color：red;}
•  注意：尽量少用，IE6不支持

 （2）标签选择器

•  描述：匹配指定的HTML标记
•  语法：h1{color:red;}
•  注意：CSS标签选择器，与HTML标记的名称一样，但不能加尖括号

 （3） class选择器（类选择器）---使用频率最高的

•   描述：给一类HTML标记加样式。这里所指的“一类”是：每个HTML标记都有一个class属性，且class的值一样。class属性是公共属性，每个HTML标记都有。
•   语法格式：.class{}
•   类选择器的名称，以“.”开头，后跟HTML标记的class属性的值（该值不能以数字开头）

 （4）id选择器

•   描述：给指定id的元素添加样式。每一个HTML标记都有一个公共的id属性。
•   语法格式：#id{}
•   注意：网页中HTML标记的id属性的值，必须是唯一的。以”#“开头，后跟HTML标记的id属性的值。
•   id一般是给JS使用，不是用来加样式的。class属性只能给CSS用，不能给JS用。

               

2、组合选择器

 （1）多元素选择器

•    描述：给多个元素加用一个样式。多个选择器之间用逗号隔开
•    举例：h1,p,div{} 、h1,p,.class{}

 （2）后代元素选择器

•    描述：给某个标签的某一个后代元素加样式（后代包括直接和间接）。选择器之间用”空格“隔开。
•    举例： div  .class{} 、div  h1.class（带前缀的类选择器）

 （3）子元素选择器

•    描述：给某个元素的子元素添加样式
•    举例：div>h1.class

3、伪类选择器：给超链接加的样式（链接的不同状态）

 （1）一个超链接，有四个状态：

•  正常状态（:link）：鼠标没放上之前链接的样式               
•  放上状态（:hover）：鼠标放到链接上时样式
•  激活状态（:active）：按住鼠标左键不松开的样式，这个状态特殊（短暂，一般不用）
•  访问过的状态（:visited）：按住鼠标左键，并弹起，这时的样式效果

    例如：a:link, a:visited{color=#444;text-decoration=none;}

CSS属性

1、CSS尺寸属性

• width：元素宽度，一定要加px单位
• height：元素高度
• 块元素才有尺寸属性，行内元素没有尺寸属性。<input>行内元素比较特殊。

2、CSS字体属性

• font-size：文字大小。如：font-size：14px；
• font-family：字体。如：font-family：微软雅黑；
• font-style：斜体，取值：italic。如：font-style：Italic；
• font-weight：粗体，取值bold。

3、CSS文本属性

• color：文本颜色
• text-decoration：文本修饰线，取值：none（无）、underline（下划线）、overline（上划线）、line-through（删除线）
• text-align：文本水平对齐方式，取值：left、center、right
• line-height：行高，可以固定值，也可以百分比
• text-indent：首行缩进。如：text-indent：28px；
• letter-spacing：字间距。单位像素。

4、CSS列表属性

• List-style：列表样式，取值：none。去掉项目符号或编号前面的各种符号。
  • 举例：ul, li{list-style:none;}

5、CSS边框属性：每个元素都可以加边框线

•  border-left：左边框线。
  • 格式：border-left：粗细 线型 线的颜色
  • 线型：none（无线）、solid（实线）、dashed（虚线）、dotted（点状线）
• border-right、border-top、border-bottom
• border：同时给上下左右设置

6、CSS内边距属性：边框线到内容间的距离

• 注意：平常我们所说的width和height属性，它们指内容的宽度和高度，不含内、外边距、边框线。
• padding-left、padding-right、padding-top、padding-bottom
• 缩写形式
  • padding：10px；同时设置上下左右内边距
  • padding：10px 20px；上下为10px，左右为20px
  • padding：5px 10px 20px；上为5px，左右为10px，下为20px
  • padding：5px 10px 15px 20px；顺序一定是“上右下左”

7、CSS外边距属性：边线往外的距离

•  margin，用法同上

8、CSS背景属性

• background-color：背景颜色
• background-image：背景图片地址。如：background-image：url（xx/xx.png）
• background-repeat：背景平铺方式，取值：no-repeat（不平铺）、repeat-x（水平方向）、repeat-y（垂直方向）、默认水平垂直
• background-position：背景定位。
  • 格式：background-position：水平方向定位 垂直方向定位；
  • 用英文单词定位：background-position：  （left center right） （ top center bottom）
  • 用固定值定位：background-position：50px 50px；距离左边50  上边50
  • 用百分比定位：background-position：50% 50%；水平居中 垂直居中
  • 用混合定位
• 简写方式
  • background：背景色 背景图 平铺方式 定位方式
  • 举例：background：#ccc url（xx/xx.png）no-repeat center center