HTML前端——CSS样式

使用CSS样式的方式：

1 HTML<!DOCTYPE> 声明标签
2 内链样式表<body style="background: green; margin: 0; padding: 0"></body>
3 嵌入式样式表<style type="text/css"></style>
4           需要将样式放在<head></head>里
5 引入式样式表<link rel="stylesheet" type="text/css" href="style.css">
　title插入图片<link  rel="icon" href="img/dang.png"/>

定义样式表：

1.HTML标记定义：

　　　　 <p>....</p>
        p{属性：属性值；属性1：属性值1}
        p可以叫做选择器，定义那个标记中的内容执行其中的样式
        一个选择器可以控制若干个样式属性，他们之间需要用英语的";"隔开，最后一个可以不加";"

2.Class定义：

　　　　 <p class="p">...</p>
        class 定义是以"."开始
        .p{属性：属性值；属性1：属性值1}

3.ID定义：

        <p id="p">....</p>
        ID定义是"#"开始的
        #p{属性：属性值；属性1：属性值1}

4.优先级问题：

        1.ID>Class>HTML 
        2.同级时选择离元素最近的一个的：
            #p{color：red}
            #p{color：#f60}
            执行颜色为#f60的

5.组合选择器（同时控制多个元素）

        E,F  多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔  a,b{color: #f00;}
        E F  后代元素选择器，匹配所有属于E元素后代的F元素，Ｅ和Ｆ之间用空格分隔　＃nav li{display:inline;} li a{<font-weight:bold;}
        E>F  子选择器，匹配所有E元素的子元素F  div>strong{color:#f00}
            加案例
        E + F 毗邻元素选择器，匹配所有紧邻E元素之后的同级元素F  p+p{color:#f00}

注意嵌套规则：
        1.块级元素可以包含内联元素和某些块级元素，但内联元素不能包含块级元素，他只能包含其他内联元素。
        2.块级元素不能放在p里面
        3.有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4..p,dt 
        4.li 内可以包含div
        5.块级运算和块级元素并列、内联元素与内联元素并列。（错误的：<div><h2></h2><style></style></div>）

6.伪元素选择器：

        1.a：link正常连接的样式
        2.a：hover鼠标放上去的样式
        3.a：active选择链接时的样式
        4.a：visited已经访问过的链接的样式

常见属性

1.颜色属性：

color属性定义文本的颜色：
        color：green
        color：#ff6600
        简写式：color：#f60
        红（R）、绿（G）、蓝（B）每个的取值范围0-255    color：rgb(255,255,255)
        RGBA 是代表Red（红色）Green（绿色）Blue（蓝色）和Alpha的（色彩空间透明度）color：rgba（255，255，255，1）

2.字体属性：

1.font-size字体大小：

            px:设置一个固定的值
            %：父元素的百分比
            smaller：比父元素更小
            larger：比父元素更大

View Code

2.font-family定义字体

            font-family：微软雅黑，serif；
            可以使用","隔开，以确保当字体不存在的时候直接使用下一个

雅黑

使用CSS样式的方式：

定义样式表 ：

常见属性

定义样式表：