html编程开发学习_CSS语法

一、CSS书写方式

1、内嵌式写法；2、外嵌式写法；3、行内式写法

二、CSS语法格式

1、选择器{属性: 值; 属性:值;......}

选择器：选择（html标签，如：p标签，h标签，a标签）

简单选择器：标签选择器；类选择器（使用最多）；ID选择器；通配符选择器

复合选择器：后代选择器（使用最多）；并集选择器；标签指定式选择器（交集选择器）

属性：

background-color 背景颜色；color 前景色（文字颜色）；font-size:20px 设置文字大小；width:20px; 设置宽度

height:20px; 设置高度；

2、标签选择器

注意：标签选择器，必须是html标签

标签名：{属性: 值;......}

      p{
            color: brown;
            font-size: 30px;
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }

单位：px：像素；em：一个文字的大小1em。

颜色表示方式：1、直接设置颜色对应的单词；2、十六进制设置；3、以RGB的方式设置；4、RGBA()：a：alpha 0--1；5、opacity：半透明效果

3、类选择器（class）

语法：

.自定义类名{属性: 值; 属性:值;...}；类名不能以数字开头或纯数字，也不能以特殊字符开头

类选择器调用：

html标签通过class属性调动类样式；一个类样式可以被多个标签同时调用；一个标签可以同时调用多个样式

        /*类选择器的定义*/
        .public{
            color: blue;
        }

4、ID选择器

语法：#自定义名称{属性: 值}

调用：标签可通过ID属性调用

ID选择器与类选择器之间的区别：
◆一个ID样式只能被一个标签调用（身份证）
◆一个标签只能调用一个ID样式

5、通配符选择器

语法：
*{属性： 值;....}

特点：将页面中所有的标签都选中，设置样式。

6、font属性

?font-size 设置文字大小
?font-weight 设置文字加粗显示

?font-style 设置文字斜体
◆normal 默认为正常显示
◆italic 文字斜体

?font-family 设置文字字体
◆直接设置字体名称

◆ 设置字体对应的单词

◆line-height 设置文字的行高
注意：
?该属性只对文字起作用。

7、font属性连写

语法： font:font-style font-weightfont-size/line-height font-family

◆在font属性联写中，font-size必须在font-family前面。

8、后代选择器

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

注意：
◆后代选择器，标签之间必须是嵌套关系
◆后代选择器，选择器与选择器之间必须有空格隔开。
◆后代选择器只能改变子元素中的样式。

9、标签指定式选择器

语法：
标签名.类名{属性: 值;}
标签之间的关系：
◆标签之间属于既.....又...的关系（指的是同一个标签）

10、并集选择器

语法：选择器,选择器{属性:值;...}

注意：
◆并集选择器，标签之间可以是嵌套关系可以是并列关系。