css样式三种引入方式选择器常用属性：背景属性字体属性边框属性内间距外间距盒子模型

最新推荐文章于 2022-04-17 15:18:13 发布

missing walker

最新推荐文章于 2022-04-17 15:18:13 发布

阅读量903

点赞数

本文链接：https://blog.csdn.net/langdei/article/details/99465239

版权

一、CSS简介

1.什么是css

重叠样式表
主要是负责标签的样式  美化页面

一个网页分三大部分

结构层： 主要由html负责  负责页面的结构
表现层： 主要由css负责  页面的展示样式 美化页面
行为层： 主要由js负责  负责页面和用户的交互效果

Css是单独的一种文件类型 后缀为.css的文件

2.Css的三种引入方式

行间样式
给标签添加style属性值就是你要设置的css样式
```
<div style="width:100px;height:100px;background-color:green"></div>
```

嵌入式
将css代码写在 head标签内的style标签内

<style>
	div{
		width:200px;
		height:200px;
		background-color:gold;
	}
</style>

外链式
在head标签内通过link标签的href属性引入外部css文件

<link rel="stylesheet" href="./css/2.css">
在css文件中写css代码
div{
	width:100px;
	height:100px;
	background-color:gold;
}

3.引入方式优先原则：

谁里的越近谁生效，有继承，向上继承。谁靠近元素越近，谁生效。如果靠的近的有些属性没写到，例如行内式少了宽高，会向上继承外链式的宽高，但背景颜色还是会用自己的红色

Css语法格式：
------------------------------------------------------------------------------------------------------------------------------------------ 在这里插入图片描述

4.Css选择器

用来选取要设置的html标签

标签选择器： 通过标签名来查找元素

选择符： 标签名
影响范围最大 一般很少单独使用

Id选择器： 通过标签的id属性的值来获取元素

选择符 #
Id属性的值不能重复 ，一个id值在一个html文件中只能出现一次
影响范围最小

Class选择器： 通过元素的class属性的值来获取元素

选择符: .
一个标签的class属性可以有多个值，
一个class属性的值可以被多个标签去使用
影响范围介于id选择器和标签选择器之间

三种优先级代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css的三种基本选择器</title>
	<style>
		/*标签选择器*/
		/*div{
			width:200px;
			height:200px;
			background-color:pink;
		}*/
		/*id选择器器*/
		#item1{
			width:100px;
			height:100px;
			background-color:pink;
		}
		/*class选择器*/
		.box{
			width:150px;
			height:150px;
			background-color:green;
		}
		.box1{ 
			border:3px solid red;
		}
	</style>
</head>
<body>
	<div class="box box1">1</div>
	<div id="item1">2</div>
	<div class="box">3</div>

</body>
</html>

5.三种基本选择器的优先级

标签选择器<类选择器<id选择器
谁的影响范围大谁的优先级就小，影响范围越小优先级越高。谁的影响范围越小，谁生效;谁的影响范围越大，
优先级越小 跟引入方式一样，选择器也会向上继承，没有的继承上一个，有的直接使用

6.关系选择器

后代选择器：选择符 空格
选择指定标签内的 所有符合要求的标签 忽略层级关系

子元素选择器：选择符>
只获取指定元素的直接子元素

       并集选择器（组选择器/并列选择器）：
选择符 ,	
一次性给多个元素设置相同的样式

      伪类选择器：：hover
当鼠标移入指定元素时，修改当前元素的样式

 伪元素选择器：
After  在指定元素内部的后面插入指定的内容
Before  在指定元素的内部前面插入指定的内容
以上两个选择器要配合content使用

关系选择器代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>关系选择器</title>
	<style>
		/*后代选择器
			设置.wrap内的所有p标签的样式

		*/
		.wrap p{
			color:red;
		}

		/*子选择器
			设置.wrap的子元素p样式
		*/
		.wrap>p{
			color:blue;
		}

		/*并集选择器
			要求：给 wrap的子元素span和最外面的span标签设置 字体颜色为粉色
		*/
		.wrap>span,span{
			color:pink;
		}
	

		/*伪元素选择器 hover*/
		.box{
			width:100px;
			height:100px;
			background-color:red; 
		}
		.box:hover{
			width:200px;
			height:200px;
			background-color:pink;
			color:green;
		}
		/*在box内部的前面插入一个字符‘你’*/
		.box:before{
			content:'你';
		}
		/*在box内部的后面插入一个字符‘？’*/
		.box:after{
			content:'?';
		}
	</style>
</head>
<body>
	<div class="wrap">

		<div class="inner">
			<p> 我是inner里p</p>
		</div>

		<p>我是wrap内的p</p>
		<span>我是wrap内的span</span>
	</div>
	<p>我是最外层的</p>
	<span>我是最外面的sapn</span>


	<div class="box">
		上来试一试
	</div>
</body>
</html>

二、css常用的属性

1.css颜色的表示方式

A.直接使用英语单词来表示
background-color:red;

B.十六进制表示方式
取值范围0-9A-f
一共有六位十六进制数 来表示最终显示的颜色
每两个数为一组 分别代表 红 绿 蓝

background-color:#ff0000;
background-color:#00ff00;
background-color:#0000ff;

/*简写*/
background-color:#00f;

C.十进制数表示方式
由三个进制的数字 来表示最终的显示颜色
0-255
rgb(红色,绿色,蓝色)
background-color:rgb(255,255,0);

D.带透明度的颜色表示
Rgba(红色,绿色,蓝色,透明度)
0-1之间的小数
background-color:rgba(255,0,0,.4);

2.背景属性

A.放入背景图像
Background-image

B.设置背景颜色
Background-color

C.背景定位：图像在背景中的位置，有很多关键字：top，bottom，left，right，center；但也可以直接指定x，y值。
直接指定x，y值：Background-position：91px 91px;

D.背景重复，常用来消除重复的图像
消除重复：Background-repeat：no-repeat;

E.设置图像占页面的大小百分比
background-size:100% 100%;

3.字体属性

Color  颜色
color:red;

Font-size 大小；浏览器的默认字体大小是16px
谷歌浏览器最小只能设置到12px
font-size:50px;

Font-weight 是否加粗
Bold/800 normal/400

Font-family  字体类型
如果用户电脑没有指定的字体会使用默认字体显示
font-family:宋体,楷体;  如果第一个字体不存在会去使用第二个字体
font-family: 'Angsana New';  如果字体的名字中有空格需要加引号，本身有引号的在外面用和他本身不同的引号

字体风格
Font-style    是否倾斜
Nomal   不倾斜
Italic     斜体
oblique   倾斜

4.边框属性

上边框
Border-top:
左边框
Border-left:
右边框
border-right:
下边框
Border-bottom:

边框粗细 边框的样式  边框的颜色 
border: 1px solid  red
边框样式：solid实线    dotted点状线  dashed虚线 double双线

5.内间距

设置元素边界距离内部内容之间的间距

关键字：padding
会改变元素的实际大小
上间距
padding-top:20px;
左间距
padding-left:20px;
右间距
padding-right:20px;
下间距
padding-bottom:20px;

简写
	如果只给一个值代表四边的间距
	如果是四个值 从上开始 依次顺时针旋转 每个值代表一个边： 上 右 下 左
	如果三个值 第一个值是上 第二个值是左右 第三个值是下
	如果是两个值 第一个值是上下 第二个值是左右的 
			
	padding:50px;
	padding:10px 20px 30px 40px;
	padding:10px 20px 30px;
	padding:20px 50px;

6.外间距

设置元素距离四周外部元素之间的间距

关键字：margin:
Margin的使用和padding是一样的可以单独指定方向设置
		margin-top:20px;
		margin-bottom:20px;
		margin-left:20px;
		margin-right:20px;
还可以不指定方向一次设置多个值

margin 为负值 主要应用于边框的合并
margin-top:-5px;

一般情况下 我们用margin来去实现块元素的 水平居中
水平居中:margin:0 auto;

7.盒子模型

使用现实中的盒子来描述页面中的元素的属性

盒子的实际宽度=width+左border+右border+左padding+右padding+左margin+右margin
盒子的实际高度=height+上border+下border+上padding+下padding+上margin+下margin

Box-sizing:border-box  让盒子大小=css样式的实际大小，会自动设置成你所写的width宽度和height高度