CSS

ybs大约 11 分钟

一、css编写的位置

1.1、行内样式（内联样式）

写在style属性中

<h1 style="color:red;font-size:60px;">欢迎来到Y的博客</h1>

1.2、内部样式

写在style标签中（可写在任何地方，一般写在head中）

1.3、外联样式（推荐）

单独一个css文件

<link rel="stylesheet" href="./xxx.css">

（需要写在head中）

rel（relation：关系）属性用于指定链接的资源类型，而stylesheet是指链接的资源类型是样式表

1.4、优先级

行内样式 >内联样式 = 外部样式

内联样式和外部样式后面覆盖前面的

二、css选择器

2.1、基本选择器

1、通配符选择器 *

2、元素选择器标签名

3、类选择器标签名

4、id选择器 **.**类名

2.2、css复合选择器

1、交集选择器

作用：选中同时符合多个条件的元素

语法：

选择器1选择器2.......

注意：

有标签名时，标签名必须写在前面
id选择器，通配符选择器，基本上不参与复合选择器
交集选择器不可能同时出现两个元素选择器
用的最多的是元素名加类选择器例如： p.beauty

2、并集选择器（分组选择器）

作用：同时选取多个元素

语法：

选择器1，选择器2，选择器3....

注意：

并集选择器一般竖着写
都可以作为并集选择器的一部分
用于集体声明

3、后代选择器

作用：选中指定元素中，符合要求的后代元素

语法：

选择器1 选择器2 选择器3.....

注意：

后代选择器选中的是后代，不选中祖先
儿子孙子重孙子都是后代

4、子代选择器

作用：选中指定元素中符合要求的子元素（只是儿子元素）

语法：

选择器1 > 选择器2

注意：

子代选择器最终选择的是子代不是父

5、兄弟选择器

相邻兄弟选择器

作用：选中符合条件的相邻兄弟元素（紧挨着的元素）

语法：

选择器1+选择器2

通用兄弟选择器

作用：选择符合条件的所有兄弟元素（下面所有）

语法：

选择器1~选择器2

注意：两种选择器都是只选中下面的元素

6、属性选择器

作用：选中属性符合要求的元素

语法：

标签名[属性名] 选中具有某个属性的元素
标签名[属性名=“值”] 选中某个属性，且属性值等于指定值的元素
标签名[属性名^=“值”] 选中某个属性，且属性值以指定值开头的元素
标签名[属性名$=“值”] 选中某个属性，且属性值以指定值结尾的元素
标签名[属性名*=“值”]选中某个属性，且属性值包含指定值的元素

7、伪类选择器

作用：选中特殊状态的元素

常用的伪类选择器
- 1、：link 超链接未被访问的状态
- 2、：visited 超链接访问过的状态
- 3、：hover 鼠标悬停在元素上的状态
- 4、：active 元素激活的状态（什么是激活----按下鼠标不松开）
  - 以上四个遵循LVHA的顺序
- 5、：focus 获得焦点的元素（表单元素才能使用）
  - 通过点击元素、触摸元素、或者tab键，获得焦点
常见结构为类
- :first-child 所有兄弟元素中的第一个
- :last-child 所有兄弟元素中的最后一个
- :nth-child(n) 所有兄弟元素中的第n个
- :first-of-type 所有同类型兄弟元素中的第一个
- :last-of-type 所有同类型兄弟元素中的最后一个
- :nth-of-type(n) 所有同类型兄弟元素的第n个

8、伪元素选择器

作用：

选中元素中的一些特殊位置

常见伪元素：

::first-letter 选中元素中的第一个文字
::first-line 选中元素中的第一行文字
::selection 选中被鼠标选中的内容
::placeholder 选中输入框的提示文字
::before 在元素最开始的位置，创建一个子元素（必须用content属性指定内容）
::after 在元素的最后的位置，创建一个子元素（必须用content属性指定内容）

2.3、选择器的优先级

三、颜色的表示

3.1、对应单词名

3.2、rgb/rgba

r 红色 rgb（255,0,0）
g 绿色 rgb （0,255,0）
b 蓝色 rgb（0,0,255）
a 透明度

小提示：

三种颜色相同时，呈现的是灰色，值越大，灰色越浅
rgb（0，0，0）是黑色 rgb （255,255,255）白色

3.3、HEX或者HEXA

将红色蓝进行组合，格式#rrggbb 每一位数字的取值范围是0~f，每种光的最小值是：00，最大值是：ff

红色：#ff0000
绿色：#00ff00
蓝色：#0000ff
白色：#ffffff

四、css字体属性

4.1、字体大小

属性名：font-size

4.2、字体族

font-family: "STCaiyun","Microsoft YaHei",sans-serif

注意：

字体包含空格，需要用引号包裹起来
设置多个字体，从左向右查找有没有该字体，最后写上serif（衬线字体）或者sans-serif（非衬线字体）

4.3、字体风格

属性名：font-style

常用值：

normal：正常（默认值）

italic：斜体

4.4、字体粗细

属性名：font-weight

常用值：

lighter：细 100~300

normal：正常 400~500

bold：粗 600以上

bolder：很粗

数值：

100~1000（无单位）数值越大，字体越粗

4.5、字体复合写法

属性名：font

作用：将字体样式编写在一起

规则：

1、字体大小、字体族必须都写上

2、字体族必须是最后一位，字体大小必须是倒数第二位

3、各属性之间用空格隔开

例子

font: italic bold 16px/1.5 Arial, sans-serif;

解释：

font-style: italic;：设置字体样式为斜体。
font-weight: bold;：设置字体粗细为粗体。
font-size: 16px;：设置字体大小为16像素。
line-height: 1.5;：设置行高为字体大小的1.5倍。
font-family: Arial, sans-serif;：设置字体族为Arial，如果无法加载Arial字体，则使用sans-serif字体作为备选。

五、css文本属性

4.1、颜色属性

color：rgb（）

4.2、文本间距

字母间距：letter-spacing
单词间距：word-spacing

4.3、文本修饰

属性名：text-decoration

属性值；

none：无装饰线

underline：下划线

overline：上划线

line-through：删除线

dotted：虚线

wavy：波浪线

4.4、文本缩进

属性名：text-indent

4.5、文本对齐（水平）

属性名：text-align

属性值：

left（默认）

right

center

4.6、行高

属性名：line-height

属性值：

normal：根据文字大小自动决定（默认）

注意：

line-height和height的关系

设置了height，高度就是height

不设置height，会根据line-height计算高度

对于单行文字，让height等于line-height，文字垂直居中

4.7、文本对齐（垂直）

1、顶部（默认）

2、居中

单行文字：height=line-height

多行文字：使用定位

=======================================

浮动

特点：

脱离文档流
浮动之后默认宽高都会被内容撑开，可以设置宽高
不会独占一行，可以与其他元素共用一行
不会margin合并，不会margin塌陷
不会像行内块一样被当做文本处理

浮动之后产生的影响

**对兄弟元素的影响：**后面的兄弟元素会占据浮动元素之前的位置，在浮动元素的下面，对前面的兄弟元素无影响

对父元素的影响： 不能撑起父元素的高度，导致父元素高度塌陷，但是父元素的宽度依然束缚浮动元素

消除浮动后产生的影响：（清除浮动）

方案一：给父元素指定高度

方案二：给父元素也设置浮动，会有其他影响

方案三：给父元素设置overflow：hidden

方案四：在所有浮动的元素后面添加一个块级元素，并给块级元素设置clear：both

方案五：给浮动元素的父元素设置伪元素，通过伪元素清除浮动

.parent::after {

content: "";

display: block;

clear:both;

}

注意：

布局中的一个原则，设置浮动元素的时候，兄弟元素要么全都浮动，要么全都不要浮动

属性	功能	属性值
float	设置浮动	leftrightnone
clear	清除浮动	left：清除前面左浮动产生的影响rightboth

定位

相对定位

作用：

相对自己的位置进行定位

属性：

position：relative

使用left、right、top、bottom调整位置

特点：

不会脱离文档流，元素的位置变化，只是视觉上的变化，不会影响其他元素
定位元素显示层级比普通元素高
- 定位的元素盖在普通元素之上。
- 都发生时，后写的会覆盖之前的
left不能和right一起设置
top不能和bottom一起设置

注意：

大多数情况下，相对定位会与绝对定位配合使用

绝对定位

作用：

参考包含它的包含块进行定位

包含块是

1、没有脱离文档流的元素，包含块就是父元素

2、对于脱离文档流的元素，包含块是第一个拥有定位属性的祖先元素

属性：

position：absolute

使用left、right、top、bottom调整位置

特点：

脱离文档流，会对后面的兄弟元素和父元素产生影响
left不能和right一起设置
top不能和bottom一起设置
绝对定位不能和浮动同时设置，同时设置则以定位为主
无论是什么元素，设置了绝对定位后就会变成定位元素

表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				padding: 0;
				margin: 0
			}

			form {
				width: 500px;
				background: #f60;
				padding: 20px;
				box-sizing: border-box;
				margin: 20px auto;
			}

			input[type=date],
			input[type=number],
			input[type=text],
			input[type=tel],
			input[type=email],
			input[type=password] {
				padding: 10px;
				outline: 0;
				border: none;
				border-radius: 10px;
			}

			button,
			input[type=button],
			input[type=reset] {
				width: 98px;
				height: 40px;
				padding: 12px 20px;
				font-size: 14px;
				color: white;
				border: 1px solid #409eff;
				;
				background-color: #409eff;
				border-radius: 4px;
			}

			button:hover,
			input[type=button]:hover,
			input[type=reset]:hover {
				background-color: #66b1ff;
				background-color: #66b1ff;
				cursor: pointer;
			}

			.form-item {
				border-bottom: 1px solid white;
				padding-bottom: 5px;
				overflow: hidden;
				height: 48px;
				line-height: 48px;
			}

			.form-item .left {
				width: 30%;
				height: 48px;
				float: left;
				color: white;
				font-weight: bold;
			}

			.form-item .right {
				width: 70%;
				height: 48px;
				float: right;
			}

			.form-item label span {
				color: white;
			}
		</style>
	</head>
	<body>
		<form action="https://baidu.com/s">
			<div class="form-item">
				<div class="left">输入关键词： </div>
				<div class="right">
					<input value="111" placeholder="输入关键词" type="text" name="wd" />
				</div>
			</div>

			<div class="form-item">
				<div class="left">输入密码： </div>
				<div class="right">
					<input placeholder="输入密码" type="password" name="password" />
				</div>
			</div>

			<div class="form-item">
				<div class="left">性别： </div>
				<div class="right">
					<label>
						<span>男</span>
						<input value="boy" type="radio" name="gender" />
					</label>
					<label>
						<span>女</span>
						<input value="girl" type="radio" name="gender" />
					</label>
				</div>
			</div>

			<div class="form-item">
				<div class="left">输入爱好： </div>
				<div class="right">
					<label>
						<span>唱歌</span>
						<input value="song" type="checkbox" name="hobby[]" />
					</label>
					<label>
						<span>篮球</span>
						<input value="basketball" type="checkbox" name="hobby[]" />
					</label>
				</div>
			</div>


			<div class="form-item">
				<div class="left">选择文件上传</div>
				<div class="right">
					<input type="file">
				</div>
			</div>

			<div class="form-item">
				<div class="left">邮箱</div>
				<div class="right">
					<input type="email" name="email">
				</div>
			</div>

			<div class="form-item">
				<div class="left">电话</div>
				<div class="right">
					<input pattern="^1\d{10}$" type="tel" name="tel">
				</div>
			</div>

			<div class="form-item">
				<div class="left">主题色</div>
				<div class="right">
					<input type="color">
				</div>
			</div>

			<div class="form-item">
				<div class="left">年龄</div>
				<div class="right">
					<input type="number" step="4" min="18" max="30">
				</div>
			</div>

			<div class="form-item">
				<div class="left">入学时间</div>
				<div class="right">
					<input type="date">
				</div>
			</div>



			<div class="form-item">
				<div class="left"> </div>
				<div class="right">
					<button>提交</button>
					<!-- <input type="submit" value="提交"> -->
					<input type="button" value="保存">
					<input type="reset" value="清空">
				</div>
			</div>


		</form>
	</body>
</html>