CSS样式随笔记录（一）
CSS层叠样式表：定义如何使用HTML标签，否则标签的表示方式都是一样的，不够美观
CSS写出来有几种样式：
1、行内样式：样式直接写在标签的style属性上，只用于该标签，作用范围小。
2、内部样式表：样式定义在< style >标签里面，作用在定义的文档中。
3、外部样式表：样式定义在一个.css文件里面，通过< link >标签引入样式到html中。
ex：内部样式表：
<html>
<head>
<title>有样式和没有的区别title>
<style type="text/css">
p{
color: red;
font-size: 20px;
/*在样式内部应该这样写注释，不过这样的方法是定义的
内部的样式的特点，只在定义的文档内有效，我们一般都是
定义在一个.css文件里面，然后通过< link >标签引入样式
表到html页面中，通常使用这种方式将html和样式分开
ex：*/
}
style>
head>
<body>
<p>who am i?p>
body>
html>
运行结果：
一个标签既有行内样式、内部样式、外部样式修饰，且都有相同的样式属性，我们需要讨论使用的顺序：
优先使用行内样式。
执行步骤是浏览器解释执行html代码的顺序，后面的样式会将前面有相同样式的属性值覆盖。
浏览器默认样式->外部样式->内部样式->行内样式。行内样式不管怎样都是最后执行的。
2,3的执行顺序由内部样式表和外部样式表在< head >中的顺序决定
对于不同的样式，我们可以通过样式选择器的三种方法选择，
首先是标签选择器，最直接
然后是类选择器，这种选择器主要用于定义公共部分的样式，不同的样式但是有相同的
样式，通过标签的class属性使用。
语法：.类名{样式}（类名不能以数字开头，尽量具有实际意义。类名要区分大小写。）
但是用的也不是很多，
ex：
<html>
<head>
<title>样式规则title>
<style type="text/css">
.red
{
color: aquamarine;
font-family: "Microsoft Yahei";
}
style>
head>
<body>
<h2 class="red">xihuan77h2>
body>
html>
运行结果：
最后用的最多的是id选择器，因为一个网页中id的值都是唯一的。
语法：#id名{样式}（类名不能以数字开头
ex：
#crew {
width: 960px;
height: 1080px;
margin: 0 auto;
text-align: center;
}
ex：摘取一个制作的静态网页的部分：
<header>
<div>
<div id="title">Hello Worlddiv>
<div id="titlebottom">
China is speeding up strategic plan, standards, traffic rules, laws and regulations on accident-incurred liabilities for
its smart car industry, Economic Information Daily reported Thursday.
div>
<div id="login">
<div>CREATE YOUR ACCOUNTdiv>
<div>IT IS ABSOLUTELY FREEdiv>
<div>
<input type="text" placeholder="[email protected]">
<input type="password" placeholder="Create your password">
<input type="submit" value="SIGN UP">
div>
div>
div>
header>
然后是对应id的css文件：
body {
font-family: "Microsoft Yahei", sans-serif;
font-weight: lighter;
}
header {
background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560771244865&di=68fc4186a46ae379e3d0a339e513609f&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180605%2F2b84b61ddb52446cbb2ebb5fa40698c9.jpeg);
color: white;
width: 1600px;
height: 990px;
text-align: center;
margin: 0 auto;
}
#title {
display: inline-block;
font-size: 64px;
padding-top: 200px;
width: 960px;
}
#titlebottom {
display: inline-block;
box-sizing: border-box;
width: 960px;
font-size: 24px;
padding: 70px 70px 100px 70px;
}
#login {
display: inline-block;
border: 1px solid white;
width: 960px;
height: 240px;
}
#login div:first-child {
font-size: 20px;
transform: scale(1.2, 1);
padding-top: 60px;
padding-bottom: 15px;
}
#login div:nth-child(2) {
font-size: 1em;
transform: scale(1.2, 1);
color: rgb(90, 90, 90);
}
#login div input:first-child {
width: 300px;
height: 50px;
border: none;
}
#login div input:nth-child(2) {
width: 300px;
height: 50px;
border: none;
}
#login div input:nth-child(3) {
width: 120px;
height: 50px;
background-color: #000000;
color: #ffffff;
border: none;
}
运行效果：
优先使用行内样式（优先级最高）。最先执行的优先级最弱，因为它会被覆盖掉。
执行顺序是：先应用默认样式，而后标签样式，而后类样式，而后id样式，
最后选择行内样式。优先级顺序与执行顺序相反（有相同属性名称的时候才有用）。
标签的这些样式可以被继承：
color、font-size、font-style、font-weight、font、line-height、list-style-image、
text-align
因为html本身是一种嵌套结构，标签可以套标签，有父标签和子标签之分。
后代选择器的顺序：
浏览器默认的样式->继承样式->标签样式->后代选择器（优先应用最近的父容器，以此类推）
->类样式->后代选择器（优先应用最近的父容器，以此类推）->ID样式->后代选择器（优先应用最近的父容器，以此类推）
->行内样式->子元素选择器->只能用于某元素的子元素，相比后代选择器范围缩小了。
Html相同属性的执行顺序（与优先级相反）
浏览器默认的样式->继承样式->标签样式->类样式->ID样式->行内样式