CSS入门

最新推荐文章于 2023-12-15 16:42:47 发布

nx2000223

最新推荐文章于 2023-12-15 16:42:47 发布

阅读量34

点赞数

本文链接：https://blog.csdn.net/nx2000223/article/details/117571689

版权

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

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

定义 Web 页面布局以及页面中元素的显示方式
利用 CSS 样式实现 HTML 内容(结构)与表现(格式)的分离

CSS 与 HTML 加载流程

CSS语法结构

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>

CSS注释

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

CSS引入方法

HTML 中引入(使用) CSS 的 3 种方法：

内嵌式：又称行内式，在HTML标签上编写样式，如：<p style="color:red">
内部式：包含在HTML的<head></head>中，只对当前页面有效，如:<style>...</style>
外部式：链接引入外部样式表文件，如：<link href="style.css" ...>

CSS 引入方式-内嵌式

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

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

CSS 引入方式-内部式

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

CSS 引入方式-外部式

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

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

p {    
    color: green;    
    font-size: 30px;
}

CSS选择器

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

标签选择器
类选择器
ID选择器
包含选择器
选择器分组