前端学习笔记---CSS介绍与基础语法1-CSDN博客

本文链接：https://blog.csdn.net/m0_59777070/article/details/133011047

CSS介绍与基础语法

CSS层叠样式表，其主要功能就是给html标签添加一些样式，让其更好看一些，主要分为两大部分及选择器和属性 .本片文章主要叙述选择器语法。

CSS文件的注释方法

注释方法1:
/*单行注释*/
注释方法2:
/*
多行注释
*/

注释通常在写css样式时用于划定样式区域

css语法结构

选择器{
属性1:值1；
属性2:值2；
....
}

css的链接方式

1.在<head></head>标签内的<style></style>标签内书写：
<head>
	<style>
	h1{
		color:red;
	}
	</style>
</head>

2.在.css文件内书写后link入html文件:
<link rel="stylesheet" href="hh1.css">

这种方法是最正规的方式，其拥有高度的解耦合性

3.在标签内部书写:
<h1 style="color:green">
老板好，要上课吗
</h1>

该方法不经常使用，耦合性太高

选择器

所谓选择器就是指css语法如何修饰到该被指定到的标签

基本选择器

本次采用该代码演示选择器：
  <div id="d1" class="c1">我是d1
	  <div id="d11" class="c1">我是d11
		<div id="d111" class="c1">
			我是d111
		</div>
	  </div>
	  <div id="d12" class="c1 c2">
			我是d12
	  </div>
  </div>

  <div id="d2" class="c2">
	我是d2
  </div>

  <div id="d3" class="c3">
	我是d3
  </div>

1.id选择器: #id{}
#d1{
color:red;
}

效果如下:

2.类选择器: .class{}
.c2{
color:red;
}

效果如下(一个标签能有多个类):

3.标签选择器: 标签{}
div{
color:red;
}

效果如下:

4.通用选择器 *{} 所有标签全部有效
*{
color:red;
}
效果如下:

组合选择器

1.后代选择器 标签1 标签2{}
	标签1下的所有标签2被修饰
 div div{
 color:red;
 }
 效果如下:

2.儿子选择器 标签1>标签2{}
	标签1下紧贴着的标签2被渲染
div>div{
color:red;
}
效果如下:

3.毗邻选择器 标签1+标签2{}
	标签1外紧贴着的标签2被渲染
div+div{
color:red;
}

效果如下:

4.弟弟选择器 标签1~标签2{}
	同级别的标签1下的标签2被修饰

#d1~div{
color:red;
}

效果如下:

属性选择器

1.含有某属性: [属性名]{}
[id]{
color:red;
}

效果如下:

2.含有某属性且为某值: [属性名='']{}
[class='c2']{
color:red;
}

效果如下:

3.含有某属性且属性为某值的某标签: 标签名[属性名='']{}

div[class='c2']{
color:red;
}

效果如下:

分组与嵌套

分组:标签1,标签2,标签3{}
,表示并列关系

嵌套:#id .class,标签2{}
不同的选择器可以嵌套使用

伪类选择器

1.标签:link{} 修饰点击前
2.标签:hover{} 修饰悬浮态
3.标签:active{} 修饰点击中
4.标签:visited{} 修饰点后

#a1:link{
	background-color: red;
}
#a1:hover{
	background-color: yellow;
}
#a1:active{
	background-color: blue;
}
#a1:visited{
	background-color: green;
}

仅首次点击有效果

5.标签:focus{}
input框获取焦点，即鼠标点击input框后出现的修饰

#a2:focus{
	background-color: red
}

效果如下:

伪元素选择器

1.标签:before{}
2.标签:after{}

在标签的前面后面添加内容

p:before{
	content: '我是前面';
}
p:after{
	content: '我是后面';
}

效果如下:

下一篇博客将介绍css的属性相关的内容，其是css设计的主要的内容