CSS之快速入门

最新推荐文章于 2024-06-17 22:09:44 发布

橙子是唯一的水果

最新推荐文章于 2024-06-17 22:09:44 发布

阅读量89

点赞数

文章标签： css

本文链接：https://blog.csdn.net/czswydsg/article/details/117586772

版权

CSS快速入门

CSS简介

（1）CSS 是 Cascading Style Sheets 的缩写，即：层叠样式表单

（2）CSS 是 HTML 语言的一种扩展，其主要作用为：

A.定义 Web 页面布局以及页面中元素的显示方式

B.利用 CSS 样式实现 HTML 内容(结构)与表现(格式)的分离

（3）简单来说：CSS 相当于 HTML 的“装饰器”或“化装品”

CSS语法

（1）语法结构

h1 { color:blue; font-size:35px; }

h1 选择器

{ color:blue; font-size:35px; } 声明

color，font-size 属性

blue 35px 属性值

（2）语法应用

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

（3）CSS注释

/* xxx */ 以 /* 开始，以 */ 结束，中间为注释内容

（4）CSS引入方式

内嵌式：又称行内式，在HTML标签上编写样式。

<p style="color:red"></p> style 样式标识

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

<style type="text/css">       

      p {            

           color: blue;            

           font-size: 30px;        

       }    
</style>

外部式：链接引入外部样式表文件。

<link rel="stylesheet" type="text/css" href="style.css">

Link 引入外部样式标识

"style.css" 外部样式文件（与引用的HTML页面在同一目录下）

（5）CSS选择器

标签选择器

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>

类选择器

类(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>

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>

通配选择器

利用 * 为指定范围内的所有标签设置样式。

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

包含选择器

HTML中为父元素(标签)下的子元素设置样式。

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

选择器分组

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

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

橙子是唯一的水果

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS之快速入门

CSS快速入门CSS简介（1）CSS 是 Cascading Style Sheets 的缩写，即：层叠样式表单（2）CSS 是 HTML 语言的一种扩展，其主要作用为：A.定义 Web 页面布局以及页面中元素的显示方式B.利用 CSS 样式实现 HTML 内容(结构)与表现(格式)的分离（3）简单来说：CSS 相当于 HTML 的“装饰器”或“化装品”CSS语法（1）语法结构h1 { color:blue; font-size:35px; }h1选择器{ col..
复制链接

扫一扫