web 学习笔记2-CSS

来源：互联网发布：淘宝商城怎么开编辑：程序博客网时间：2024/05/21 09:28

1、CSS的基本概念：

CSS：Cascading Style Sheet 层叠样式表CSS 作用就是给HTML页面标签添加各种样式为什么要用CSS呢？HTML的缺陷：     1. 不能够适应多种设备    2. 要求浏览器必须智能化足够庞大    3. 数据和显示没有分开    4. 功能不够强大例如每个样式都要在html中写一遍，很冗余，而且会增加传输的流量。CSS 优点：    1.使数据和显示分开    2.降低网络流量    3.使整个网站视觉效果一致    4.使开发效率提高了

2、CSS基本语法：

p{color：red;}选择器{属性名：属性值 ;}注意：    选择器后一定是大括号.属性名后必须用冒号隔开.属性值后用分号    属性名和冒号之间最好不要有空格。

3、CSS和HTML的结合方式：

CSS代码理论上位置是任意的，但通常写在style标签里CSS和HTML的结合方式有3种：    a. 行级样式表:采用style属性,范围只针对此标签适用        例如：        <div style = "border:1px solid red ;">大家好</div>    b. 内嵌样式表:采用<style>标签完成。范围针对此页面    c. 外部样式表: 采用建立样式表文件。针对多个页面.        引入样式表文件的方式:            1):采用<link>标签                例如:                <link rel = "stylesheet" type = "text/css" href = "a.css"></link>            2):采用import，必须写在<style>标签中，并且必须是第一句                例如：                @import url(a.css) ;        两种引入方式的区别：            外部样式表中不能写<link>标签,但是可以写import语句    简单的示例：<head>    <meta charset="UTF-8">    <meta name="Generator" content="EditPlus?">    <meta name="Author" content="">    <meta name="Keywords" content="">    <meta name="Description" content="">    <link rel = "stylesheet" type = "text/css" href = "a.css"></link>    <title>Document</title>    <style type="text/css">      /*          CSS和HTML的结合方式:               1. 行级样式表: 采用style属性完成               2. 内部样式表: 采用style标签完成               3. 外部样式表: 采用外部css文件完成      */     p{        font-weight:bold;        font-style:italic;     }    </style></head><body>    <p>你好</p>    <p>你好</p>    <p>你好</p>    <p style = "color:red">你好</p></body>

4、CSS选择器-基本选择器：

a.标签选择器:指的就是选择器的名字代表html页面上的标签    p{        color:red ;        border:1px dashed green;    }b.类选择器：规定用圆点.来定义    优点：灵活    例如:     .one{        background-color:#ff0099;     }c. ID选择器：规定用#来定义    例如:     #one{        cursor:hand;    }d:通用选择器： 用*定义,代表页面上的所有标签。    *{        font-size:30px;        margin-left:0px;        margin-top:0px;    }这几个之间的区别：    标签选择器针对的是页面上的一类标签.    类选择器可以供多种标签使用.    ID选择器是值供特定的标签(一个). ID是此标签在此页面上的唯一标识。简单的示例：<head><style type="text/css">    /*        a. 标签选择器: 就是选择了页面上一类标签        b. 类选择器： 规定用圆点. 来定义        c. ID选择器:  规定用#来定义 : 正对特定的一个标签用        d. 通用选择器： 用*来定义    */    p{        color:red;    }    *{        padding:0px;        margin:0px;        color:yellow;    }    .one{        border:1px solid red ;    }    #two{        border:3px dashed green ;    }</style></head><body>    <div class = "one">你好</div>    <p>你好</p>    <h1 class = "one">你好</h1>    <h2 id = "two">你好</h2></body>注意没有设置选择器就会使用通用的选择器。

5、CSS选择器-扩展选择器：

a. 组合选择器:采用逗号隔开。    例如: p,h1,h2,.one,#two{color:red ; }b. 关联选择器(后代选择器): 采用空格隔开。    例如: h4 span i{color:red ; }     表示h4标签中的span标签中的i标签的样式    h4和span和i标签不一定是紧挨着的。c. 伪类选择器。    1)静态伪类：规定是用:来定义.只有两个.只能用于超链接.    :link表示超链接点击之前的颜色    :visited表示链接点击之后的颜色    例如:        a:link{color:red ;}        a:visited{color:yellow;}    注意：        a:link{}定义的样式针对所有的写了href属性的超链接(不包括锚)        a{}定义的样式针对所有的超链接(包括锚)    2)动态伪类: 针对所有的标签都适用。    :hover : 是移动到某个标签上的时候    :focus : 是某个标签获得焦点的时候    :active : 点击某个标签没有放松鼠标时    例如:         label:hover{color:#00ff00; }        input:focus{            background-color:#ff9999;            border:1px solid red;        }        a:active{            color:blue;        }简单的示例：<style type="text/css">    div,p,h1,.one,#two{        border:5px double blue ;    }    h3 i   {        color:red ;    }    a:link{        color:red ;    }    a:visited{        color:yellow;    }    input:focus{        border:1px solid red ;        color:green ;        background-color:#ffcc99;    }    p:active{        color:blue;    }    label:hover{        cursor:hand;    }    table{        width:300px;        height:300px;        border:1px solid red ;        border-collapse:collapse;    }    table td{        border:1px solid red ;    }    table tr:hover{        background-color:#ffcc66;    }</style><body>    <div>你好</div>    <p>你好</p>    <h1>你好</h1>    <h4 class = "one">你好</h4>    <h3>你好<b>你好<i>你好</i>你好</b>你好</h3><br>    <i>你好</i>    <a href = "" name = "">你好</a>    <input type="text" name="">    <label>你好</label>    <table>        <tr>            <td></td>            <td></td>            <td></td>        </tr>        <tr>            <td></td>            <td></td>            <td></td>        </tr>        <tr>            <td></td>            <td></td>            <td></td>        </tr>    </table></body>

6、CSS选择器-各种选择器的冲突：

CSS样式的冲突:    1.ID选择器 > 类选择器 > 标签选择器    2.行级样式表 > 内嵌样式表 > 外部样式表    3.外部样式表的ID选择器  > 内嵌样式表的标签选择器原则：就近原则

0 0