css基础语法篇

CSS基础语法篇

一、css语法

1.CSS规则由两个主要的部分构成：选择器以及一条或多条声明

2.CSS选择器的作用：
（1）选择器通常是您需要改变样式的 HTML 元素。
（2）每条声明由一个属性和一个值组成。
（3）属性（property）是您希望设置的样式属性（style attribute）。
（4）每个属性有一个值。属性和值被冒号分开。

二、css如何创建

1.如何插入样式表

（1）外部样式表(External style sheet)
（2）内部样式表(Internal style sheet)
（3）内联样式(Inline style)

2.外部样式表

（1）语法：

3.内部样式表

（1）语法：

4.内联样式表

三、css部分属性介绍

3.1 css background（背景）

1.CSS 属性定义背景效果

（1）background-color：定义了元素的背景颜色.
   补充：CSS中，颜色值通常以以下方式定义:十六进制 - 如：
    “#ff0000”
   RGB - 如：“rgb(255,0,0)”
   颜色名称 - 如：“red”
（2）background-image：属性描述了元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

body
{
		background-image:url('gradient2.png');
		background-repeat:repeat-x;
}

（3）background-repeat：如果你不想让图像平铺，你可以使用 background-repeat 属性

body
{
		background-image:url('img_tree.png');
		background-repeat:no-repeat;
		background-position:right top;
}

补充知识点：背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置，可以利用 background-position 属性改变图像在背景中的位置:
（4） background-attachment：
   ①背景图像是否固定或者随着页面的其余部分滚动。
   ② background-attachment属性取值：
     i. scroll:默认值，背景图相对于元素固定，背景随页面滚动而移动，即背景和内容绑定, 对于scroll，一般情况背景随内容滚动，但是有一种情况例外。对于可以滚动的元素（设置为overflow:scroll的元素），当background-attachment设置为scroll时，背景图不会随元素内容的滚动而滚动。
     ii. fixed：背景图相对于视口固定，所以随页面滚动背景不动，相当于背景被设置在了body 上。
     iii.local：背景图相对于元素内容固定
     iv:inhert:继承
（5） background-position：设置背景图像的起始位置

2.背景简写属性

（1）将这些属性合并在同一个属性中背景颜色的简写属性为 “background”:

body {background:#ffffff url('img_tree.png') no-repeat right top;}

3.2 text（文本）

1.字体属性

（1）设置字体：

（2）字体大小：

（3）字体粗细：
（4）文字样式：

（5）字体复合属性：
（6）字体属性总结：

2.文本属性

（1）CSS Text（文本）属性可定义为文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等

（2）文本颜色

补充：HSL（H（色相），S （饱和度），L（亮度））

（3）对齐文本

（4）装饰文本

（5）文本缩进

	大小
rem	相对于根元素的一个字体大小
em	等于你当前设置字体的一个字体大小

（6）行间距

四、选择器

4.1 标签选择器

（1）用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式
（2）语法：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
  	p//标签名{
    color:red;//属性：属性值
    text-align:center;
	}
  </style>
</head>
<body>
	<p>Hello World !<p>
</body>
</html>

4.2 类选择器

（1）如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
  	.center {text-align:center;}//类标签选择器
  </style>
</head>
<body>
	<div class="center">Hello World !<div>
</body>
</html>

4.3 id选择器

（1）HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义
（2）语法：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
  	#para1//id标签选择器
	{
    	text-align:center;
    	color:red;
	}
  </style>
</head>
<body>
	<div id="center">Hello World !<div>
</body>
</html>

---

（3）id选择器和类选择器的区别：

4.4 复合选择器（交集选择器）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div.first {/*复合选择器，只选中div标签中class为first的元素*/
      color: red;
    }
  </style>
</head>
<body>

  <div class="first">Hello world !</div>
  <p class="first">Hello world !</p>

</body>
</html>

4.5 选择器分组（并集选择器）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div, p, .first{/*并集选择器*/
      color: red;
    }
  </style>
</head>
<body>

  <div >Hello world !</div>
  <p >Hello world !</p>
  <span class="first" >Hello world !</span>
</body>
</html>

4.6 关系选择器

1.子元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>关系选择器</title>
  <style>
    div > span{
      color: red;
    }
  </style>
</head>
<body>
<div>我是父元素
  <p>我div是子元素
    <span>我是后代元素 </span>
  </p>
  <span>我是span子元素</span>
</div>

</body>
</html>

2.后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>关系选择器</title>
  <style>
    div span{
      color: red;
    }
  </style>
</head>
<body>
<div>我是父元素
  <p>我div是子元素
    <span>我是后代元素 </span>
  </p>
  <span>我是span子元素</span>
</div>

</body>
</html>

3.选择兄弟标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>关系选择器</title>
  <style>
    p + span{/*选择p的下一个兄弟元素span，将+换为~表示将p元素后的所有span标签元素选中*/
      color: red;
    }
  </style>
</head>
<body>
<div>我是父元素
  <p>我div是子元素
    <span>我是后代元素 </span>
  </p>
  <span>我是span子元素</span>
</div>

</body>
</html>

4.7 属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>关系选择器</title>
  <style>
    p[title]{/*选中P标签中带title属性的元素，p[title=first],则表示只选择P标签中带title属性且属性值等于first的元素*/
      color: red;
    }
  </style>
</head>
<body>
<div>
  <p title="first">Hello World !</p>
  <p >Hello World !</p>
  <p >Hello World !</p>
</div>

</body>
</html>

4.8 伪类选择器

1.伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>关系选择器</title>
  <style>
    ul > li:first-child{/*伪类元素选择器，选中该标签当前第一个子元素*/
      color:red
    }
    ul >li:nth-child(3){
      color:blue
    }
    ul >li:not(:nth-child(4)){/*去除伪类选择器选中的元素（ <li>第三个</li>）*/
      color: green;
    }
    ul >li:not(:nth-of-type(4)){/*去除伪类选择器选中的同类型元素（<li>第四个</li>）*/
      color: green;
    }

  </style>
</head>
<body>
<ul>
  <span>我是span标签</span>
  <li>第一个</li>
  <li>第二个</li>
  <li>第三个</li>
  <li>第四个</li>
</ul>

</body>
</html>

2.超链接的伪类

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    a:link{
      color:red
    }
    a:visited{
      color: yellow;
    }
    a:hover{
      color: blue;
    }
    a:active{
      color: green;
    }
  </style>
</head>
<body>
  <a href="#">没访问过的链接</a>
  <a href="#">访问过的链接</a>
  <a href="#">鼠标移入链接</a>
  <a href="#">鼠标点击</a>

</body>
</html>

4.9 伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    p::first-letter{/*选择段落中第一个字母设置样式*/
      font-size: 50px;
    }
    p::first-line{/*选择段落中第一个行设置样式*/
      color: red;
    }
    p::before{
      content:"只能通过css在元素开始添加内容"
    }
    p::after{
      content:"只能通过css在元素最后添加内容"
    }
  </style>
</head>
<body>
  <p> Hello World !</p>
</body>
</html>

4.10 通配符选择器

（1）在曾CSS中，通配符选择器使用“*”定义，他表示选择页面中所有的元素（标签）,常用通配符选择器来去除浏览器的默认样式
（2）语法：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
	<div class="center">Hello World !<div>
</body>
</html>```

3.补充：书写样式可通过引入normalize.css和reset.css来实现清除浏览器的默认样式

normalize	对默认样式进行统一，保证不同的浏览器的默认样式一致
reset.css	清除浏览器的所有默认样式

4.11 继承

1.样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素中
2.继承是发生在祖先和后代之间的
3.并不是所有样式都会被继承，如背景、布局等就被会被继承

4.12 选择器的权重

1.当我们用把不同的选择器选中同一个元素并为该元素修改样式时，会发上样式冲突，此时我们需要根据不同选择器的权重来书写和判断，最终哪个选择器会成功选中该元素并修改它的样式
2.选择器的权重

选择器	样式
内联样式	1,0,0,0
id选择器	0,1,0,0
类和伪类选择器	0,0,1,0
元素选择器	0,0,01

3.权重越高，则会选择该选择器；注意选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器
4.如果优先级相同，则会选择里该元素最近的样式
5.可以在某一个样式后面添加！important则此时该样式的优先级超过了内联样式的优先级，拥有最高的优先级（慎用）