css基础语法(1)

最新推荐文章于 2024-07-18 17:34:14 发布

王泽洋✿

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量270

点赞数

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/qq_45624490/article/details/122920998

版权

css基础语法(1)

css概述
基本语法
2.1样式表
2.2 选择器
2.3文本
2.4背景
2.5 css列表
2.6 伪类
2.7 透明
2.8 块级、行级、行块级标签
2.8 Display
2.9 div和span

css概述

● CSS是Cascading Style Sheets（级联样式表）。
● CSS是一种样式表语言，用于为HTML文档控制外观，定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。
● 可将页面的内容与表现形式分离，页面内容存放在HTML文档中，而用于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分。
● CSS与HTML的关系
HTML是网页内容
CSS定义页面的样式

基本语法

样式表

行内样式表
内嵌样式表
外部样式表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="./css/out.css" rel="stylesheet"/>
		<!-- 
		在css包中建立一个css类型的文件out.css
		p{
			color:cornflowerblue; font-size: 20px;
		}	 
		 -->
		<style type="text/css">
			.p1{
     
				color: #F08080 ; font-size: 15px;
			}
		</style>
	</head>
	<body>
		<!-- 基本语法：
		    1.行内样式表
			  style="属性名:属性值;属性名:属性值;"
			2.内嵌样式
			<style type="text/css">
				p{
					color: cornflowerblue; font-size: 20px;
				}
			</style>
			3.外部样式表(实开发用)
			  <link href="./css/out.css"rel="stylesheet"/>
		-->
		<p style="color: #6495ED; font-size: 10px;">
			这是行内样式表 
		</p>
		
		<p class="p1">
			这是内嵌样式
		</p>
		
		<p>
			这是外部样式表
		</p>
		
		
	</body>
</html>

选择器
要使用CSS对HTML页面中的标签实现一对一，一对多的控制，这就需要用到CSS选
择器。

● 常用的选择器：
标签选择器：通过标签选择器可以选择页面中的所有指定标签
语法：标签名 {}
类选择器：通过标签的class属性值选中一组标签
语法：.class属性值{}
id 选择器：通过标签的id属性值选中唯一的一个标签
语法： #id属性值 {}
选择器组合：通过选择器分组可以同时选中多个选择器对应的标签
语法：选择器1,选择器2,选择器N{}
通配选择器:可以用来选中页面中的所有的标签
语法：*{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		  /* 标签选择器 */
			  p{
     
				 color: coral;
			  }
		  /* 类选择器  用的最多的 */ 
			.h1{
     
				color: cornflowerblue; 
				font-size: 20px;
			}
			.p1{
     
				color: #6495ED;
			}
			.p2{
     
				color: lightcoral;
			}
			/* id选择器 */
			#pID{
     
				color: aquamarine;
			}
			/* 通配选择器 */
			*{
     
				color:  blueviolet
			}
			/* 选择器组合 */
			#pID,.p1,.p2,.h1,b{
     
				font-size: 30px;   /*px 是像素单位css中必须加单位*/
			}
			/* 选择器优先级问题:
			   由高到低
			   id>类选择器>标签选择器>通配选择器
			 */
		</style>
	</head>
	<body>
		
		<p>

最低0.47元/天解锁文章

王泽洋✿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css基础语法(1)

css基础语法css概述● CSS是Cascading Style Sheets（级联样式表）。● CSS是一种样式表语言，用于为HTML文档控制外观，定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。● 可将页面的内容与表现形式分离，页面内容存放在HTML文档中，而用于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分。● CSS与HTML的关系     HTML是网页内容 &nbs
复制链接

扫一扫