Css学习日记

2020-07-23

前言

　　为了更好的了解Web开发的前端知识，特意前来学习，主要参考的资料是菜鸟编程和b站up主-遇见狂神说的教程

1. 什么是Css

　　Css是Cascading Style Sheets的缩写，意为层叠样式表；简单来说就是用来让网页变得好看的。
　　我们都知道Web开发的前端部分是由Html+Css+Js三大部分组成，其中Html属于结构，Css则是表现，而Js则是交互；用人体来说明的话就是Html属于骨骼或者叫骨架，Css则是肌肉组织~可以这么说吧大概。

2. Css发展历史

　　发展历史为：Css1.0 -> Css2.0 ->Css2.1 ->Css3.0
　　在Css2.0中提出了一个重要思想：HTML和Css结构分离的思想，这使得网页变得更简单，且利于SEO。
　　在Css2.1中加入了浮动和定位
　　在Css3.0中加入了动画、阴影、圆角等

3. Css基本语法

　　语法格式说明：

<html>
<head>
	<meta charset="UTF-8">
	<title>标题</title>
	
	<!-- 语法规范：
		选择器{
			声明1;
			声明2;
			...
		}
	-->
    
    <style>
        h1{ color:#000000;}
    </style>
</head>
<body>
<h1>标题1</h1>
</body>
</html>

4. Css的3种样式表

I. 外部样式

　　· 链接式：
　　　　示例： <link rel="stylesheet" href="外部样式表的url地址">
　　　　[说明：] 这是现在最常用的方法，这种方式会将html和css完全渲染后才会加载。
　　· 导入式：
　　　　示例： <style> @import url("外部样式表的url地址"); </style>
　　　　[说明：] 这是Css2.1中提出的一种方法，这种方式会先加载html再渲染css，就会导致那种先出现一个很丑的网站，之后突然跳一下变好看的情况。

II. 内部样式

　　示例： <style> Css语法 </style>
　　[说明：] 要写在<head>标签内

III. 行内样式

　　示例： <p style="Css语法"></p>
　　[说明：] 在要添加样式的标签内用style属性写css语句

5. Css的选择器

5.1 Css的基本选择器

　　· Css的基本选择器有3种，分别为：标签选择器、类选择器、id选择器

　　· 这三类基本选择器的优先级排序为：id选择器>类选择器>标签选择器

I. 标签选择器

　　· 选择一类标签，如h1标签、b标签、p标签等
　　· 使用方法： 标签{}

II. 类选择器

　　· class，选择所有class属性一致的标签，可实现跨标签
　　· 使用方法： .类名{}

III. id选择器

　　· 全局唯一
　　· 使用方法： #id编号{}

5.2 Css的层次选择器

　　· 我们参考下面这张图来说明这里层次的含义，这里body为最大的一层，即最外层，后面的p1、p2、p3和那个ul为一层，而ul后面的li为一层，以此类推…

　　· 下面我们用代码来表示上面的结构：

<html>
<head>
	<meta charset="UTF-8">
	<title>测试层次选择器</title>
	<style>
		<!-- 行内样式表 -->
		<!-- 要测试的样式表 -->
	</style>
</head>
<body>
	<p class="active">p1</p>
	<p>p2</p>
	<p>p3</p>
	<ul>
		<li>
			<p>p4</p>
		</li>
		<li>
			<p>p5</p>
		</li>
		<li>
			<p>p6</p>
		</li>
	</ul>
</body>
</html>

I. 后代选择器

　　· 说明：选择某一个元素后面的所有的层级，例如：老爷爷爷爷爸爸我，老爷爷的后代选择器就包括其后面所有的：爷爷爸爸我…
　　· 示例：

/*通用选择器*/
body p{
	background: red;
}

II. 子选择器

　　· 说明：选择某一个元素的下一层元素，例如：爷爷爸爸我，爷爷的子选择器就只有爸爸“这一代”
　　· 示例：

/*子选择器*/
body>p{
	background: red;
}

III. 相邻兄弟选择器

　　· 说明：选择某一个元素的同一层元素(同辈)，只有一个，且对下不对上，即：选择该元素同一层的下一个元素，只有一个；例如：选择爸爸的相邻兄弟选择器就会选择爸爸的兄弟，如你的叔叔啊、啥的
　　· 示例：

/*相邻兄弟选择器，只有一个，选择的相邻的（且取下不取上）*/
.active + p{
	background: red;
}

IV. 通用选择器

　　· 说明：可以理解为通用兄弟选择器，即选择当前元素的向下的所有兄弟元素(同一层元素)
　　· 示例：

/*通用选择器，当前选中元素的向下的所有兄弟元素*/
.active ~ p{
	background: red;
}

5.3 Css结构伪类选择器

[基本框架：] 依旧是一个简单的层次结构，第一层：body 第二层：3个p+1个ul 第三层：ul下的3个li。
[前提：] 不使用id、class选择器前提下来选择指定对象

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>结构伪类选择器</title>
</head>

<body>
	<p>p1</p>
	<p>p2</p>
	<p>p3</p>
	<ul>
		<li>li1</li>
		<li>li2</li>
		<li>li3</li>
	</ul>
</body>

</html>

[示例1：] 选中ul的下的第一个li元素、最后一个li元素。

<!-- 前提：避免使用id和class选择器-->
<style>
    /*选中ul下的第一个li元素*/
    ul li:first-child{
    	background: #02ff00;
    }
    /*选中ul下的最后一个li元素*/
    ul li:last-child{
    	background: blue;
    }
</style>

[示例2：] 选中p1所在的p元素。

<!-- 前提：避免使用id和class选择器-->
<style>
	/*
		· 要求：选中p1；
		· 思路：定位到body（即父元素），选择其下的第一个元素；
		· p:ntn-child(1)的解析：
			选中当前p元素的父级元素（body元素），选中父级元素的第一个子元素，且为p元素时才生效。
	*/
	
	p:nth-child(1){
		background: yellow;
	}
	
	/*
		· p:ntn-of-type(2)的解析：
			选中当前p元素的父级元素（body元素），选中其下的p元素的第二个类型
	*/
	
	p:nth-of-type(2){
		background: #11EEEE;
	}
</style>

5.4 属性选择器(常用&重要)

· 顾明思义：通过标签中的各种属性来选择不同的标签

· 用法：

I. 标签 [ 属性名=属性值（可以用正则） ]{ css语法 } 如：__a[id=first]{ font-decoration: none; } __

II. = 绝对等于如：a[id=first]{ font-decoration: none; }

III. *= 包含这个元素如：a[class*=”first”]{ background: red; }

IV. ^= 以…开头如：a[href^=http]{ border-radius:10px; }

V. $= 以…结尾如：a[href$=.doc]{ color: green; }

· 示例：

Html部分：

<!DOCTYPE html>
<html>
<head>
	<title>属性选择器_测试</title>
	<link rel="shortcut icon" 		href="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=982518211,682807425&fm=26&gp=0.jpg">
	<link rel="stylesheet" type="text/css" href="./css/属性选择器_style.css"> 
</head>
<body>
	<p class="demo">
		<a href="https://www.baidu.com" class="links item first" id="first_a">1</a>
		<a href="http://qqmail.com" class="links item active" target="_blank" title="test">2</a>
		<a href="images/123.html" class="links item">3</a>
		<a href="images/123.png" class="links item">4</a>
		<a href="images/123.jpg" class="links item">5</a>
		<a href="abc" class="links item">6</a>
		<a href="/a.pdf" class="links item">7</a>
		<a href="/abc.pdf" class="links item">8</a>
		<a href="abc.doc" class="links item">9</a>
		<a href="abc.doc" class="links item last">10</a>
	</p>
</body>
</html>

Css代码：

/* 这里用的是前面学过的层次选择器，选择的demo下的后代a标签 */
.demo a{
    float: left;
    display: block;
    height: 50px;
    width: 50px;
    border-radius: 10px;
    background: #764DB3;
    text-align: center;
    color: #E6E61A;
    text-decoration: none;
    margin-right: 5px;
    font: bold 20px/50px Arial;
}

/*选择id为first_a的a标签*/
a[id=first_a]{
	color: red;
}

/*选择class中出现过links的a标签*/
a[class*=links]{
	background: #3CC4C4;
}

/*选择href属性是以http开头的a标签*/
a[href^=http]{
	background: #E61AE6;
}

/*选择href属性是以doc结尾的a标签*/
a[href$=doc]{
	color: #C48D3C;
}

/*选择href属性是以.pdf结尾的a标签*/
a[href$=\.pdf]{
	background: #77887E;
}

6. 美化网页

6.1 字体样式

· font-family：设置字体类型

· font-size：设置字体大小，可以用px(常用)或者em(少用)，一个em代表一个字的大小

· font-weight：设置字体粗细，可以用bolder、lighter等或数字（最大900=bolder）

· font-style：设置字体样式（斜体），可以用normal、italic和oblique来设置

· color：设置字体颜色

· 示例：

<style>
	/*
		font-family: 设置字体样式
		font-size: 设置字体大小
		font-weight: 设置字体粗细
		font-style: 设置字体是否为斜体
		color: 设置字体颜色
	*/
	body{
		font-family: "Arial Black", 楷体;
		font-size: 20px;
		font-weight: bolder;
		color: red;
	}
	p{
        font-style: oblique;
	}
</style>

· 可以使用font属性将所有的这些字体样式写到一起(顺序为：font-style font-weight font-size font-family)：如：

<style>
	p{
		font: oblique bolder 20px "楷体";
	}
</style>

[ 注 ] 如何使用第三方字体文件？

使用第三方字体，需要使用@font-face进行声明：格式为：@font-face{ font-family: 给该字体起的名字; src: url(第三方字体文件的url);}，使用方法和普通设置字体的方法一致。

@font-face{
    font-family: My_font_1;
    src: url('./font/font_1.ttf');
}

6.2 文本样式

颜色

color属性设置颜色，分三种：单词描述（red、green） RGB形式（如：#000000 或 rgb(0,255,255)） RGBA形式（rgba(0,255,255,0.9) 这里的A为透明度的意思，范围0~1）。
对齐方式

text-align属性设置水平对齐方式，可设置为left、center、right。
首行缩进

text-indent属性设置首行缩进距离，这里一般用em而不是px，如：常用：首行缩进两个字符：text-indent: 2em
行高

line-height属性设置行高，有时可以通过将行高设置为块的高度来实现垂直方向的居中对齐（上下居中）。
装饰（上、中、下划线）

text-decoration属性来设置各种划线，如：上划线：over-line 中划线：line-through 下划线：underline

Ps： 可以用该属性来去除a标签的下划线： text-decoration: none;
文本图片垂直方向对齐

vertical-align属性可实现文本图片水平对齐的效果，如：vertical-align: middle

[ 示例： ]

HTML部分

<!DOCTYPE html>
<html>
<head>
	<title>文本样式</title>
</head>
<body>

<h1>围棋</h1>

<p class="p1">
	围棋，是一种策略型两人棋类游戏，中国古时称“弈”，西方名称“Go”。流行于东亚国家（中、日、韩、朝），属琴棋书画四艺之一。围棋起源于中国，传为帝尧所作，春秋战国时期即有记载。隋唐时经朝鲜传入日本，流传到欧美各国。围棋蕴含着中华文化的丰富内涵，它是中国文化与文明的体现。
</p>
<p class="p2">
	围棋使用长方形格状棋盘（看上去像正方形）及黑白二色圆形棋子进行对弈，棋盘上有纵横各19条线段将棋盘分成361个交叉点，棋子走在交叉点上，双方交替行棋，落子后不能移动，以围地多者为胜。因为黑方有先行占地之利，故而规则人为规定黑方局终时要给白方贴子。围棋被认为是世界上最复杂的棋盘游戏。中日韩等各国制定的竞赛规则略有不同。
</p>
<p class="p3">
	2019年11月，文化和旅游部办公厅组织开展了国家级非物质文化遗产代表性项目保护单位检查和调整工作，围棋保护单位为北京棋院（北京桥牌	院、北京市棋牌运动管理中心）。 
</p>

<p>
	<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1630887409,4122025046&fm=26&gp=0.jpg" style="width: 200px height: 50px">
	左边是一张图片，我要和它居中对齐
</p>

</body>
</html>

Css部分

h1{
    color: rgba(0, 255, 255, 0.8);
    text-align: center;
}
p:nth-of-type(1){
    text-indent: 2em;
    line-height: 20px;
}
body p:last-child{
    text-decoration: underline;
}
img{
    vertical-align: middle;
}

6.3 超链接伪类

· 总共有四种，用于表示a标签不同状态下的效果，常用的只有a:hover这一种

I. 未访问的链接状态： a: link{}

II. 已经访问/点击过的链接状态： a: visited{}

III. 鼠标悬浮在a标签上的状态： a: hover{}

IV. 鼠标点击a标签不松手的状态：a: active{}

[ 规则 ]：

· a: hover使用时必须跟在a: link和a: visited的后面

· a: active使用时必须跟在a: hover的后面

[示例]：

html部分:

<!DOCTYPE html>
<html>
<head>
	<title>超链接伪类</title>
</head>
<body>

<a href="#">
	<img src="img/a.png">	
</a>
<p>
	<a href="#">码出高效：Java开发手册</a>
</p>
<p>
	<a href="#">作者：孤尽老师</a>
</p>
<p>
	<a href="#" id="price">99￥</a>	
</p>
	
</body>
</html>

Css部分：

a{
    /*去除所有a标签的下划线*/
    text-decoration: none;
}

/*设置鼠标悬停时的效果*/
a:hover{
    font-size: 20px;
    color: red;
}

6.4 阴影

· text-shadow:属性表示阴影效果，其有4个值：水平偏移量 + 竖直偏移量 + 阴影半径 + 阴影颜色

[ 示例 ]：

/* html部分为上面的超链接伪类　*/
#price{
    text-shadow: 10px -5px 2px #000000;
}

6.5 列表样式

· list-style属性用于设置li标签的效果，这是一个简写属性，可以将所有有关列表的属性都设置在一个声明中

· list-style 可设置的属性值为：list-style-type + list-style-position + list-style-images

· list-style可以不设置其中的某个值，其中未设置的属性会使用默认值

· list-style-type属性：设置列表项的标志类型，即设置每一个ul前面的符号样式

· list-style-image属性：将图片设置为列表项的标志类型，即将ul前面的符号换成选择的图片

· list-style-position属性：设置列表项标志的位置，inside：设置列表项标志放置在文本以内 | outside：默认值，设置列表项标志位于文本的左侧，列表项标志放置在文本以外

属性名	说明	属性值
`list-style`	简写属性，可以设置全部与列表相关的属性	list-style-type + list-style-position + list-style-images
`list-style-type`	设置列表项的标志类型	none、circle、square等
`list-style-image`	将图片设置为列表项的标志	url(“ 图片地址 “)
`list-style-position`	设置列表项标志的位置	inside、outside

· [示例]：

html部分

<!DOCTYPE html>
<html>
<head>
	<title>列表样式</title>

</head>
<body>

<div id="nav">
	<h2 class="title">主题市场</h2>
	<ul>
		<li>
			<a href="#">女装</a>/<a href="#">内衣</a>/<a href="#">家居</a>
		</li>
		<li>
			<a href="#">女鞋</a>/<a href="#">男鞋</a>/<a href="#">箱包</a>
		</li>
		<li>
			<a href="#">母婴</a>/<a href="#">童鞋</a>/<a href="#">玩具</a>
		</li>
		<li>
			<a href="#">男装</a>/<a href="#">户外运动</a>
		</li>
		<li>
			<a href="#">美妆</a>/<a href="#">彩妆</a>/<a href="#">个护</a>
		</li>
		<li>
			<a href="#">手机</a>/<a href="#">数码</a>/<a href="">企业</a>
		</li>
	</ul>
</div>


</body>
</html>

css部分

#nav{
    width: 300px;
}
.title{
    text-indent: 1em;
    background: #C03E47FF;
}
ul{
    background: #778B8E
}
/*
	list-style-type：
		none：去原点
		circle 空心圆
		decrimal 数字
		square 正方形
*/
ul li{
    height: 30px;
    list-style-type: circle;
    text-indent: 1em;
}
a{
    font-size: 15px;
    text-decoration: none;
    color: #CF2F51FF
}
a:hover{
    text-decoration: underline;
    color: #2ED61B
}

6.6 背景图像应用+渐变

6.6.1 背景图片应用

background：简写属性，可以设置与背景相关的所有属性，顺序为：background-color、background-image、background-repeat、background-attachment、background-position

background-color：设置背景颜色

background-image：设置背景图片，属性常用url()表示

background-repeat：设置背景图片的重复方式，包括：水平重复(x-repeat)、垂直重复(y-repeat)、不重复(no-repeat)、水平垂直都重复(repeat)

background-attachment：设置背景图片是否固定或随页面的其余部分滚动，包括：scroll(默认，背景图随页面的滚动而滚动)、fixed（背景图不随页面滚动而滚动）、local（背景图片会随元素的内容的滚动而滚动）

background-position：设置背景图片的位置，包括：方式一：left、right、bottom、top、center 方式二：x% y%（水平位置垂直位置，左下角为100% 100%） 方式三：xpos ypos（水平位置垂直位置，左上角是0，单位可以是像素或其他css单位）

[ 示例 ]：

html部分

<!DOCTYPE html>
<html>
<head>
	<title>背景图片及渐变</title>
</head>
<body>
	<div class="div_1"><b>我是no-repeat：不重复，position为right bottom</b></div>
	<div class="div_2"><b>我是repeat-x：只在水平方向上重复</b></div>
	<div class="div_3"><b>我是repeat-y：只在垂直方向上重复</b></div>
	<div class="div_4"><b>我是repeat：x、y都重复</b></div>
	<div class="div_5"><b>我是no-repeat：不重复，position为right 5em</b></div>
</body>
</html>

css部分

div{
    width: 700px;
    height: 1000px;
    border: 5px solid #576619; 
    margin: 5px;
}
.div_1{
    background-image: url(img/bg.png);
    background-repeat: no-repeat;
    background-position: right bottom;
}
.div_2{
    background-image: url(img/bg.png);
    background-repeat: repeat-x;
}
.div_3{
    background-image: url(img/bg.png);
    background-repeat: repeat-y;
}
.div_4{
    background-image: url(img/bg.png);
    background-repeat: repeat;
}
.div_5{
    background: url(img/bg.png) no-repeat right 5em;
}

6.6.2 渐变

· 渐变分为两种：线性渐变 和 径向渐变

· 线性渐变：Linear Gradient 向下/向上/向左/向右/对角方向

· 径向渐变：Radial Gradient 由他们的中心定义

I、线性渐变

· 格式：background-image: linear-gradient(方向,颜色1,颜色2....);

· 预定义方向：to bottom、to top、to right、to left、to bottom right 等

· 方向使用角度：格式：background-image: linear-gradient(angle, color1, color2....);

这里的角度是指水平线和渐变线之间的角度，逆时针方向计算，即：0deg将创建一个从下到上的渐变，90deg将创建一个从左到右的渐变。Ps：很多浏览器使用的是旧的标准：即0deg-从左到右，90deg从下到上。

角度图如下：

II、径向渐变

· 格式：background-image: radial-gradient(shape size at position, start-color, ..., end-color);

· 颜色节点均匀分布(默认情况下)：background-image: radial-gradient(red, green, blue);

· 颜色节点不均匀分布：background-image: radial-gradient(red 5%, green 15%, blue 60%);

· 设置形状：shape参数定义了形状，其值有：circle（圆）和ellipse（椭圆）。如：background-image: radial-gradient(circle, red, green, blue);

· 不同尺寸大小关键字的使用：size参数定义了渐变的大小，它有以下的四个值：closest-side、farthest-side、closest-corner、farthest-corner

· 重复的径向渐变：repeating-radial-gradient()函数用来设置重复的径向渐变

7. 盒子模型

7.1 什么是盒子模型

margin：外边距，清除边框外的区域

padding：内边距，清除内容周围的区域

border：边框

content：盒子/元素内容，即文本或者图像等