这是我参与「第四届青训营」笔记创作的第二天

了解前端之一CSS

CSS是什么？

Cascading Style Sheets
用来定义页面元素的样式
· 设置字体和颜色
· 设置位置和大小
· 添加动画效果

h1{
    color: white:
    font-size:14px;
   }

这是一个CSS样式
其中h1表示选择器
`white`表示属性值
`14px`表示声明

在页面中使用CSS

有三种方式引用CSS样式




截屏2022-07-25 16.01.39.png

选择器Selector

找出页面中的元素，以便给他们设置样式
使用多种方式选择元素
·按照标签名、类名或id
·按照属性
·按照DOM树中的位置

常用的选择器

11种选择器

1.通配符选择器

通配选择器常用“*”表示，是所有选择器中作用范围最广的，能匹配到页面中所有的元素。

截屏2022-07-25 16.25.51.png

2.类型选择器

<style>
  h1{
    color: blue;
  }
  p{
    color: red;
  }
</style>
<body>
<div>
  <h1>类型选择器</h1>
  <p>类型选择器</p >
</div>
</body>

3.类选择器

<style>
 .one{
   color: green;
 }
  .two{
    color: pink;
  }
</style>
<body>
<div>
  <h1 class="one">类型选择器</h1>
  <p class="two">类型选择器</p >
</div>
</body

4.id选择器

<style>
 #one{
   color: yellow;
 }
  #two{
    color: goldenrod;
  }
</style>
<body>
<div>
  <h1 id="one">类型选择器</h1>
  <p id="two">类型选择器</p >
</div>
</body>

标签属性选择器

<style>
 #one{
   color: black;
 }
  #two{
    color:red;
  }
  a[href]{
    color: green;
  }
</style>
<body>
<div>
  <h1 id="one">这是类型选择器</h1>
  <p id="two">这是类型选择器</p >
  <a href=" " title="t1">点我试试，我是a标</a >
</div>
</body>

6.伪类选择器

<style>
 /*选择属于其父元素的首个子元素的每个 <p> 元素*/
 p:first-child{
   color: gold;
 }
</style>
<body>
<div>
<!--  父元素div中第一个元素是p，因此样式会变化-->
  <p>第一个p段落</p >
  <p>第二个p段落</p >
  <h1 id="one">类型选择器</h1>
<div>
<!--  这里p不是div父元素的第一个元素，因此样式没有改变-->
  <h1>类型选择器</h1>
  <p>第一个p段落</p >
</div>
  <a href=" " title="t1">点我试试，我是a标签</a >
</div>
</body>

7.伪元素选择器

<style>
<!-- 选择每个 p 元素的首行 -->
 p::first-line{
   color: gold;
 }
</style>
<body>
<div>
<!--  父元素div中第一个元素是p，因此样式会变化-->
  <p>hello </p >
  <h1 id="one">类型选择器</h1>
  <a href=" " title="t1">点我试试，我是a标签</a >
</div>
</body>

8.后代选择器

<style>

nav ul li{

color: darkseagreen;

}

</style>

<body>

<div>

<nav>

<div>

<ul>

<div>

<a href="">

<li>

<div>

<ul>

<li>后代选择器1</li>

<li>后代选择器2</li>

</ul>

</div>

</li>

</a >

</div>

</ul>

</div>

</nav>

<a href=" " title="t1">点我试试，我是a标签</a >

</div>

</body>

9.子代选择器

<style>
  nav>ul>li{
    color: darkseagreen;
  }
</style>
<body>
<div>
<nav>
  <ul>
    <li>
      <ul>
        <li>1</li>
        <li>2</li>
      </ul>
    </li>
  </ul>
</nav>
  <a href=" " title="t1">点我试试，我是a标签</a >
</div>
</body>

10.相邻兄弟选择器

<style>
  h1+p{
    color: gold;
  }
</style>
<body>
<div>
  <h1>相邻兄弟选择器</h1>
  <p>相邻兄弟选择器1</p >
  <p>相邻兄弟选择器2</p >
  <p>相邻兄弟选择器3</p >
  <p>相邻兄弟选择器4</p >
  <a href=" " title="t1">点我试试，我是a标签</a >
</div>
</body>
运行结果

11.通用兄弟选择器

<style>
  h1~p{
       color: gold;
      }
</style>
<body>
<div>
  <h1>通用兄弟选择器</h1>
  <p>通用兄弟选择器1</p >
  <p>通用兄弟选择器2</p >
  <p>通用兄弟选择器3</p >
  <p>通用兄弟选择器4</p >
  <a href=" " title="t1">点我试试，我是a标签</a >
</div>
</body>

组合（Combinators)

直接组合：AB 则满足A同时满足B
后代组合：A B 选中B，如果它是A的子孙
亲子组合：A>B 选中B，如果它是A的子元素
兄弟选择器：A~B 选中B，如果它在A后且和A同级
相邻选择器：A+B 选中B，如果它紧跟在A后面

选择器组

截屏2022-07-25 17.22.42.png

属性与属性值

颜色

hsl(0, 100%, 50%)

# 00 00 00

rgb(0, 0, 0)

截屏2022-07-25 17.31.09.png

截屏2022-07-25 17.38.49.png

alpha透明度

#ff0000ff<br>

rgba(255, 0, 0, 1)

hsla(0, 100%, 50%, 1)

字体

font-size: 20px;

通用字体族

截屏2022-07-25 17.41.23.png

font-family使用建议

字体列表最后写上字体族
英文字体放在中文字体前

font-size

small、medium、large（关键字）
px、em（长度）
相对父元素字体大小（百分数）

line-height

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				color: red;
				rgba(255, 0, 0, 1)
			}
			*{
				line-height: calc(100px);
			}
		</style>
	</head>
	<body>
		<p>这是通配符选择器 湖南师范大学魏魏魏魏 <br>我不叫楚雨寻，我叫魏 </p>
	</body>
</html>

截屏2022-07-25 17.59.42.png

text-align

left内容左对齐
center内容居中对齐
right内容右对齐
justify 内容两端对齐

spacing

letter-spacing字符间距
word-spacing字间距

text-indent

首行缩进

text-decoration

none
underline（下划线）
line-through（删除线）
overline（上划线）

white-space

nomal忽略多余空白
pre 保留空白
nowrap只保留一个空白，文本不会换行，直到遇到br标签
per-wrap保留空白符序列，正常换行
pre-line合并空白符序列，保留换行符
inherit从父元素继承

调试CSS

快捷键：ctrl+shift+I(Windows） cmd+opt+I(mac)

右键点击页面，选择检查

初步理解CSS｜青训营笔记