CSS之引入方式和选择器

　　html 在一个网页中负责的事情是一个页面的结构

css(层叠样式表) 在一个网页中主要负责了页面的数据样式。

编写css代码的方式：

第一种：在style标签中编写css代码。只能用于本页面中，复用性不强。

格式：

　　<style type="text\css">
编写css的代码。
</style>
例子：
<style type="text\css">
a{
color:#F00;
text-decoration:none;//超链接的下划线消失
}
</style>

第二种：可以引入外部的css文件。推荐使用。

方式1：使用link标签。推荐使用...
格式：
<link href="css文件的路径" rel="stylesheet"> //href是说明css样式路径，而rel是说明css样式与该html文件为样式脚本的关系

例子： <link href="1.css" rel="stylesheet"/>

方式2：使用<style>引入

格式：
　　<style type="text/css" >
　　　　@import url("css的路径");
　　</style>

例子：
　　<style type="text/css" >
　　　　@import url("1.css");
　　</style>

第三种方式：直接在html标签使用style属性编写。只能用于本标签中，复用性较差。不推荐使用。

例子：
　　<a style="color:#0F0; text-decoration:none" href="#">新闻的标题1</a>

css的注释

html的注释：

css /* css的注释 ..*/

2.选择器

选择器：选择器的作用就是找到对应的数据进行样式化。

　　1.标签选择器：就是找到所有指定的标签进行样式化。

格式：
标签名{
　　样式1；样式2....
　　}

例子：
div{
　　color:#F00;
　　font-size:24px;
　　}
　　2. 类选择器: 使用类选择器首先要给html标签指定对应的class属性值。

格式：
.class的属性值{
　　样式1；样式2...
　　}

例子：
.two{
　　　　background-color:#0F0;
　　　　color:#F00;
　　　　font-size:24px;
　　}

　　类选择器要注意的事项：
　　　　1. html元素的class属性值一定不能以数字开头。
　　　　2. 类选择器的样式是要优先于标签选择器的样式。

　　　　3. ID选择器：使用ID选择器首先要给html元素添加一个id的属性值。

　　3. ID选择器的格式：

#id属性值{
　　　　样式1；样式2...
　　}
　　id选择器要注意的事项：
　　　　1. ID选择器的样式优先级是最高的，优先于类选择器与标签选择器。
　　　　2. ID的属性值也是不能以数字开头的。
　　　　3. ID的属性值在一个html页面中只能出现一次。

　　4. 交集选择器：就是对选择器1中的选择器2里面的数据进行样式化。
选择器1 选择器2{
　　　　样式1，样式2....
　　}

例子：
.two span{
　　　　background-color:#999;
　　　　font-size:24px;
　　}

　　5. 并集选择器：对指定的选择器进行统一的样式化。

格式：
选择器1,选择器2..{
　　　　样式1；样式2...
　　}

span,a{
　　　　border-style:solid;
　　　　border-color:#F00;
　　}
　　6. 通用选择器:

*{
　　　　样式1；样式2...
　　}

　　*{
　　　　text-decoration:line-through;
　　　　background-color:#CCC;
　　}

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
    *{
        text-decoration:line-through;
        background-color:#CCC;
    }  
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head> 
<body>
    <div id="one" class="two">这个是<span>第一个div标签</span>...</div>
    <div  class="two">这个是<span>第二个div标签</span>...</div>
    <span>这个是一个span标签</span><br/>
    <a class="two" href="#">新闻标题</a>
    

</body>
</html>

7、伪类选择器：伪类选择器就是对元素处于某种状态下进行样式的。

　格式：标签：伪类{}

注意：
1. a:hover 必须被置于 a:link 和 a:visited 之后

2. a:active 必须被置于 a:hover 之后

四大伪类：

a:link{color:#F00} /* 没有被点击过---红色 */

a:visited{color:#0F0} /* 已经被访问过的样式---绿色 */

a:hover{color:#00F;} /* 鼠标经过的状态---蓝 */

a:active{color:#FF0;}/*鼠标选中的时候，即是点击鼠标左键，但是不打开*/

代码：

实现鼠标移动到某一行之后此一行变色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css" >

    table{
        background-color:#CCC;
        border-collapse:collapse;
        border:3px;
    }
    
    tr:hover{
        background-color:#06F;
    }
</style>

<body>
    <table border="1px" width="400px" height="300px" align="center" >
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>人品</th>
            </tr>
            
            
            <tr>
                <td>张三</td>
                <td>98</td>
                <td>差</td>
            </tr>
           
           
            <tr>
                <td>李四</td>
                <td>50</td>
                <td>极好</td>
            </tr>
            
            
            <tr>
                <td>综合测评</td>
                <td colspan="2">不错</td>
            </tr> 
    </table>
</body>
</html>

运行效果：

posted @ 2017-02-24 23:01 mslog 阅读(323) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

mslog

CSS之引入方式和选择器

公告