CSS的基础语法-11.29

最新推荐文章于 2024-06-20 18:01:37 发布

X619428

最新推荐文章于 2024-06-20 18:01:37 发布

阅读量118

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/X619428/article/details/128104477

版权

CSS的基础语法

1.认识：css:css又叫层叠样式表(简称样式表)，它专门用来给标签设置样式布局。

2.css代码写在哪

：


1）内联样式：将css代码写在标签style属性中
2）内行样式表:将css代码写在style标签中(style标签既可以放到head，body，一般放在head)-作用为HTML文件
3）外部样式表:将css代码写在css文件中，然后在html中通过link标签导入css文件- 可以作用所有的HTML

3.css代码则么写

css语法结构：

选择器(属性名1：属性值1；)

2）说明：

a.选择器 - 这样的选择器用来选中添加样式标签(注意样式不需要写’选择器’)

b.属性 - 必须以’属性值’的形式存在，多个属性之间用逗号分开

常用属性：color(字体颜色)，font-size(字体大小)，background-color(背景颜色)，width(宽度)，height(高度)

c.属性值 - 1.颜色值：颜色对应的英文单词，#开头的16进制颜色值，0-255RGB颜色值：rgh(红，绿，蓝)，rgba(红，绿，蓝，透明度)
2.数值大小:带单位(px)的数字，使用百分比(10%)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		 /*这儿里写css代码*/
		 a{
			 color:blueviolet;
			 font-size:40px;
		 }
		 
		 </style>
		 <link rel="stylesheet" href="css/demo1.css"
	</head>
	<body>
		<!-- 1）内联样式 -->
		<p style="font-size:30px;color:red;">我是段落一</p>
		<p>我是段落2</p>
		<a href="">我是超链接</a>
		<span>我是span1</span>
		
	</body>
</html>

                                                                                                         #                                     重点常用的选择器

我是段落1

< a href="">我是超链接1

我是段落一

我是超链接1 我是span1

我是段落1

我是超链接1


#                                                           伪类

```html
<!-- 1.普通选择器和伪类选择器的区别：
     普通选择器选中的是标签(选中所有标签的) 
 -->
<!-- 伪类选择器的写法 
     普通选择器:作为选择器{}- 选中指定的标签的指定状态
	 常见的伪类选择器:
	 1)link - 链接未访问对应的状态(只有a标签有效)
	 2）
	 
	 
	 4)
-->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="https://www.baidu.com">百度</a>
		<style>
			#a1:link{
				color:red;
			}
			#a1:visited{
				color: aqua;
			}
		</style>
		
		<!-- hover-->
		<div  id="box1">
		     <a href="http://"
	</body>
</html>