CSS入门，CSS的引入方式，CSS的选择器

最新推荐文章于 2024-07-12 18:29:20 发布

流逝9

最新推荐文章于 2024-07-12 18:29:20 发布

阅读量86

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/qq_53162555/article/details/117532656

版权

CSS 语法应用

<html>
<meta charset="UTF-8">
<title>CSS入门</title>
    <style type="text/css">    
        h1 {        
            color: blue;        
            font-size: 35px;    
        }
    </style>
<body>
    <h1>CSS快速入门</h1>    
</body>
</html>

h1 为元素选择器，对所有 h1 元素进行装饰的声明

CSS引入方式：有三种，HTML 中引入(使用) CSS 的 3 种方法

内嵌式：又称行内式，在HTML标签上编写样式，如：<p style="color:red">

<html>
<meta charset="UTF-8">
<title>CSS</title>
<body>

<p style="color:red;font-size: 30px">Hello CSS!</p>  
  
</body>
</html>

内部式：包含在HTML的<head></head>中，只对当前页面有效，如:<style>...</style>

<html>
<meta charset="UTF-8">
<title>CSS</title>
    <style type="text/css">        
        p {            
            color: blue;            
            font-size: 30px;        
       }    
    </style>
<body>
<p>Hello CSS!</p>   
</body>
</html>

外部式：链接引入外部样式表文件，如：<link href="style.css" ...>

style.css 文件（与上述的HTML页面在同一目录下）

<html>
<meta charset="UTF-8">
<title>CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<p>Hello CSS!</p>  
</body>
</html>

CSS选择器：选择器用于定位(选择)需要添加样式的网页元素

1.标签选择器 HTML标签名(元素)作为选择器名称，如：div 、h1 、p …

<html>
…
<style type="text/css">    
    div {        
        color: blue;   /* 蓝色  */
        font-size: 30px;    
    }
</style>
<body>
   <div>CSS</div>
   <div>快速入门</div>
 <h5>CSS选择器</h5>
</body>
</html>

2.类选择器类(class)用于描述一组标签的样式，class 可以用在多个标签中

<html>
…
<style type="text/css">    
    .title {        
        color: red;    /* 红色  */
        font-size: 30px;    
    }
</style>
<body>
   <div class=“title”>CSS</div>
   <div class=“title” >快速入门</div>  
   <div>CSS选择器！</div>   
</body>
</html>

3.ID选择器 ID选择器用于为标有特定ID的HTML标签设置样式

<html>
…
<style type="text/css">    
    #title {        
        color: green;   /* 绿色  */
        font-size: 30px;    
    }
</style>
<body>
   <div id=“title”>CSS</div>
   <div id=“subtitle” >快速入门</div>  
   <div>CSS选择器</div>   
</body>
</html>

4.通配选择器利用 * 为指定范围内的所有标签设置样式

<html>
…
<style type="text/css">    
    * {        
        color: purple; /* 紫色  */
        font-size: 30px;    
    }
</style>
<body>
   <div id=“title”>CSS</div>
   <div id=“subtitle” >快速入门</div>  
   <div>CSS选择器</div>   
</body>
</html>

5.包含选择器 HTML中为父元素(标签)下的子元素设置样式

<html>
…
<style type="text/css">    
   div p {        
        color: gold;  /* 金色  */       
        font-size: 30px;    
    }
</style>
<body>
   <div>
       <p>CSS</p>
   </div>
   <div>快速入门</div>  
</body>
</html>

6.选择器分组为一组元素设置相同样式，利用逗号分割多个选择器

<html>
…
<style type="text/css">    
   #title , .logo {        
        color: brown;   /* 棕色  */
        font-size: 30px;    
    }
</style>
<body>
   <div id=“title”>CSS</div>
   <div class=“logo”>CSS快速入门</div>  
</body>
</html>

如图所示的家用电器售卖网页代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #p1{
    background-color: #0f7cbf;
    font-size: 18px;
    font-weight: 700;
    color:#fff;
    line-height: 35px;
}
.p2{
    background-color: #e4f1fa;
    font-size: 14px;
    font-weight: 700;
    text-indent: 24px;
    line-height: 30px;
    color:#0f7cbf;
}
p{
    color: #666;
    font-size: 20px;
    line-height: 20px;
    text-indent: 12px;
}
span:hover{
    color: #F60;
    text-decoration:underline;
}
    </style>
<body>
    <table cellspacing="0">
        <tr>
            <td id="p1">
                家用电器
            </td>
        </tr>
        <tr>
            <td class="p2">
                大家电
            </td>
        </tr>
        <tr>
            <td>
                <p><span>平板电视</span>&nbsp;&nbsp;
                    <span>洗衣机</span>&nbsp;&nbsp;
                    <span>冰箱</span></p>
                <p><span>空调</span>&nbsp;&nbsp;
                    <span>烟机/灶具</span>&nbsp;&nbsp;
                    <span>热水器</span></p>
                <p><span>冷柜/酒柜</span>&nbsp;&nbsp;
                    <span>消毒柜</span>&nbsp;&nbsp;
                    <span>家庭影院</span></p>            
            </td>
        </tr>
        <tr>
            <td class="p2">
                生活电器
            </td>
        </tr>
        <tr>
            <td>
                <p><span>电风扇</span>&nbsp;&nbsp;
                    <span>净化器</span>&nbsp;&nbsp;
                    <span>吸尘器</span></p>
                <p><span>净水设备</span>&nbsp;&nbsp;
                    <span>挂烫机</span>&nbsp;&nbsp;
                    <span>电话机</span></p>           
            </td>
        </tr>
        <tr>
            <td class="p2">
                厨房电器
            </td>
        </tr>
        <tr>
            <td>
                <p><span>榨汁机</span>&nbsp;&nbsp;
                    <span>电压力锅</span>&nbsp;&nbsp;
                    <span>电饭煲</span></p>
                <p><span>豆浆机</span>&nbsp;&nbsp;
                    <span>微波炉</span>&nbsp;&nbsp;
                    <span>电磁炉</span></p>           
            </td>
        </tr>
        <tr>
            <td class="p2">
                五金家装
            </td>
        </tr>
        <tr>
            <td>
                <p><span>淋浴/水槽</span>&nbsp;&nbsp;
                    <span>电动工具</span>&nbsp;&nbsp;
                    <span>手动工具</span></p>
                <p><span>仪器仪表</span>&nbsp;&nbsp;
                    <span>浴霸/排气</span>&nbsp;&nbsp;
                    <span>灯具</span></p>           
            </td>
        </tr>
    </table>
</body>
</html>

感谢观看！

流逝9

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS入门，CSS的引入方式，CSS的选择器

CSS 语法应用<html><meta charset="UTF-8"><title>CSS入门</title> <style type="text/css"> h1 { color: blue; font-size: 35px; } </style><body> ..
复制链接

扫一扫