CSS基础

最新推荐文章于 2024-08-20 15:49:45 发布

迎风微笑的代码仔

最新推荐文章于 2024-08-20 15:49:45 发布

阅读量71

点赞数

分类专栏：前端基础文章标签： css html5 html 前端 java

本文链接：https://blog.csdn.net/m0_46544158/article/details/120068032

版权

前端基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

说明：归纳整理CSS相关知识

文章目录

1、概念

CSS：（Cascading Style Sheets）层叠样式表

CSS是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

2、语法

<head>
	<style>
		选择器{
			属性名：属性值;
			属性名：属性值;
		}
	</style>
</head>

选择器：要修饰的对象
属性名：修饰对象属性的名称
属性值：修饰对象属性的值

3、举例

<!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>
    <style>
		p{
            font-family: verdana;
            font-size: 20px;  
		}
		h1{
            color: rgb(202, 41, 41);
            text-align: center;
		}
	</style>
</head>
<body>
    <p>这是一个p标签</p>
	<h1>这是一个h1标签</h2>
</body>
</html>

效果如图：
在这里插入图片描述

4、CSS的3种使用方式

a. 內联样式

在HTML标签内使用style属性指定css代码

<div style="color:red;">hello css</div>

b. 内部样式

在head标签内，定义style标签，style标签的标签体内容就是css代码。即上述例子中的用法。

	<style>
		div{
			color:blue;
		}
	</style>
	<div>hello css</div>

c.外部样式

在head标签内，定义link标签，引入.css资源文件。

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>

    <!-- 在这里引入css资源文件 -->
    <link rel="stylesheet" href="a.css">

</head>
<body>
	<h1>css测试</h1>
</body>
</html>

a.css文件：

	h1{
		color:green;
	}

测试：

5、选择器

基础选择器

 1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
 	语法：#id属性值{}

 2. 元素选择器：选择具有相同标签名称的元素
     语法： 标签名称{}
     注意：id选择器优先级高于元素选择器
          
 3. 类选择器：选择具有相同的class属性值的元素。
     语法：.class属性值{}
     注意：类选择器选择器优先级高于元素选择器

举例：

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

        /* id选择器 */
        #div1{
            color: red;
        }

        /*  元素选择器  */
        #div{
            color: green;
        }

        /* 类选择器 */
        .c1{
            color: blue;
        }

    </style>
</head>
<body>

    <!-- id选择器 -->
    <div id="div1">id选择器测试！</div>

    <!-- 元素选择器 -->
    <div>元素选择器测试！</div>

    <!-- 类选择器 -->
    <div class="c1">类选择器测试！</div>
</body>
</html>

结果如下：
在这里插入图片描述

扩展选择器：

 1. 选择所有元素：
 	语法： *{}
 		 
 2. 并集选择器：
 	选择器1,选择器2{}
 	
 3. 子选择器：筛选选择器1元素下的选择器2元素
 	语法：  选择器1 选择器2{}
 		 
 4. 父选择器：筛选选择器2的父元素选择器1
 	语法：  选择器1 > 选择器2{}

 5. 属性选择器：选择元素名称，属性名=属性值的元素
 	语法：  元素名称[属性名="属性值"]{}

 6. 伪类选择器：选择一些元素具有的状态
 	语法： 元素:状态{}
 	如： <a>
 		状态：
 			link：初始化的状态
 			visited：被访问过的状态
 			active：正在访问状态
 			hover：鼠标悬浮状态

6、属性

1. 字体、文本
	 font-size：字体大小
	 color：文本颜色
	 text-align：对其方式
	 line-height：行高 
	 
2. 背景
	 background：
	 
3. 边框
	 border：设置边框，符合属性
	 
4. 尺寸
	 width：宽度
	 height：高度
	 
5. 盒子模型：控制布局
	 margin：外边距
	 padding：内边距
		 默认情况下内边距会影响整个盒子的大小
		 box-sizing: border-box;  设置盒子的属性，让width和height就是最终盒子的大小
	 float：浮动
		 left
		 right

迎风微笑的代码仔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础

说明：归纳整理CSS相关知识文章目录1、概念2、语法3、举例4、CSS的3种使用方式a. 內联样式b. 内部样式c.外部样式5、选择器6、属性1、概念CSS：（Cascading Style Sheets）层叠样式表CSS是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。2、语法<head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } &l
复制链接

扫一扫

专栏目录