首页 > 程序开发 > web前端 > HTML/CSS >

html编程开发学习_CSS语法

2017-03-28

html编程开发学习_CSS语法。

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标签

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

      div{
            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前面。

◆font属性联写中,必须有font-size 和font-family的值。
◆font属性联写中,如果属性都设置,那么按照 font:font-stylefont-weight font-size/line-height font-family 顺序写。

8、后代选择器

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

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

9、标签指定式选择器

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

10、并集选择器

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

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

相关文章
最新文章
热点推荐