CSS
一、CSS是Cascading Style Sheet的简称，称为“层叠样式表”或者“级联样式表”，是一组格式设置规则，用于控制网页内容的外观，可将页面内容与表现形式分离。
三、CSS3提供了非常多新途径去改善你的设计工作，且做了不少重要的变化。
1、样式复用，有效的避免代码臃肿
2、方便网站的后期维护
根据书写位置分为
外部样式（也叫外联式）：将网页链接到外部样式表。
内部样式（也叫嵌入式）：在网页上创建嵌入的样式表。
行内样式（也叫内联式）：应用内嵌样式到各个网页元素。
<div style="border: solid; border-color: green;">
<!-- 行内样式:书写在单个标签内并且只对当前标签产生作用的样式 -->
<p>这是初始样例</p>
<p style="background-color: pink;">这是样例</p>
<p style="background-color: #ff00ff;font-size: 10px;">这是样例</p>
<p style="font-size: 30px;border:double ; border-color: red;">这是样例</p>
</div>内部样式
书写在当前页面内，对选择器选择的标签进行样式书写
<style>
/* 由选择器与样式组成 选择器{样式;样式;}*/
/* 可以使用这种方式为页面指定标签批量设置样式 */
p{
color:red;
background-color: black;
/* 如果标签没有设置这个样式 那么都会自动设置 */
}
</style><!-- 使用<style>标签嵌入在HTML文档中，通常写在<head>与</head>之间这种方式方便在同页面中修改样式-->
<div >
<p>这是初始样例</p>
<p>这是样例</p>
<p>这是样例</p>
<p>这是样例</p>
</div>将样式内容书写纸以.css结尾的样式表文件中，在指定页面引入对指定选择的标签进行样式书写
外部样式书写与内部样式类似，只不过将书写在内部样式中的层叠样式书写在样式文件中，在指定页面进行引入
p{
font-size: 30px;
font-family: 隶书;
} <link rel="stylesheet" type="text/css" href="../css/p.css">一般情况下进行样式书写使用外部样式（针对于前端开发人员），我们一般书写内部样式进行再已有样式的基础上进行修改。
当多个样式对同一标签相同属性进行设置是行内样式>内部样式>外部样式
选择器
css的选择器通常与样式表一起使用，由选择器动态选择需要进行指定样式添加的标签
| 例子 | 例子描述 | CSS | |
|---|---|---|---|
| .intro | 选择 class="intro" 的所有元素。 | 1 | |
| #firstname | 选择 id="firstname" 的所有元素。 | 1 | |
| * | 选择所有元素。 | 2 | |
| p | 选择所有 <p> 元素。 | 1 | |
| div,p | 选择所有 <div> 元素和所有 <p> 元素。 | 1 | |
| div p | 选择 <div> 元素内部的所有 <p> 元素。 | 1 | |
| div>p | 选择父元素为 <div> 元素的所有 <p> 元素。 | 2 | |
| div+p | 选择紧接在 <div> 元素之后的所有 <p> 元素。 | 2 | |
| [ | [target] | 选择带有 target 属性所有元素。 | 2 |
| [ | [target=_blank] | 选择 target="_blank" 的所有元素。 | 2 |
| [ | [title~=flower] | 选择 title 属性包含单词 "flower" 的所有元素。 | 2 |
| [ | [lang|=en] | 选择 lang 属性值以 "en" 开头的所有元素。 | 2 |
| a:link | 选择所有未被访问的链接。 | 1 | |
| a:visited | 选择所有已被访问的链接。 | 1 | |
| a:active | 选择活动链接。 | 1 | |
| a:hover | 选择鼠标指针位于其上的链接。 | 1 | |
| input:focus | 选择获得焦点的 input 元素。 | 2 | |
| p:first-letter | 选择每个 <p> 元素的首字母。 | 1 | |
| p:first-line | 选择每个 <p> 元素的首行。 | 1 | |
| p:first-child | 选择属于父元素的第一个子元素的每个 <p> 元素。 | 2 | |
| p:before | 在每个 <p> 元素的内容之前插入内容。 | 2 | |
| p:after | 在每个 <p> 元素的内容之后插入内容。 | 2 | |
| p:lang(it) | 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。 | 2 | |
| p~ul | 选择前面有 <p> 元素的每个 <ul> 元素。 | 3 | |
| [ | a[src^="https"] | 选择其 src 属性值以 "https" 开头的每个 <a> 元素。 | 3 |
| [ | a[src$=".pdf"] | 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。 | 3 |
| [ | a[src*="abc"] | 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。 | 3 |
| p:first-of-type | 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 | 3 | |
| p:last-of-type | 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 | 3 | |
| p:only-of-type | 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 | 3 | |
| p:only-child | 选择属于其父元素的唯一子元素的每个 <p> 元素。 | 3 | |
| p:nth-child(2) | 选择属于其父元素的第二个子元素的每个 <p> 元素。 | 3 | |
| p:nth-last-child(2) | 同上，从最后一个子元素开始计数。 | 3 | |
| p:nth-of-type(2) | 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 | 3 | |
| p:nth-last-of-type(2) | 同上，但是从最后一个子元素开始计数。 | 3 | |
| p:last-child | 选择属于其父元素最后一个子元素每个 <p> 元素。 | 3 | |
| :root | 选择文档的根元素。 | 3 | |
| p:empty | 选择没有子元素的每个 <p> 元素（包括文本节点）。 | 3 | |
| #news:target | 选择当前活动的 #news 元素。 | 3 | |
| input:enabled | 选择每个启用的 <input> 元素。 | 3 | |
| input:disabled | 选择每个禁用的 <input> 元素 | 3 | |
| input:checked | 选择每个被选中的 <input> 元素。 | 3 | |
| :not(p) | 选择非 <p> 元素的每个元素。 | 3 | |
| ::selection | 选择被用户选取的元素部分。 | 3 |
.class选择器
用于选择多个拥有相同class值的指定标签（多个标签可以不同）
#id选择器
用于选择拥有指定id值的标签（id在当前页面通常只有一个）
通用选择器
选择页面中所有标签
标签选择器
直接以标签进行选择，当前页面指定标签设置指定样式
子类选择器
选择指定标签指定子标签进行样式设定
属性选择器
通过指定属性或属性的值进行标签的选择
盒子模型
在浏览器这个框框中，用多个框框进行分割，以这种风格进行页面的布局排版使用的就是盒子模型
盒子属性
margin（外边距/边界）：控制多个盒子直接的距离
border（边框）：每个盒子的厚度
padding（内边距/填充 ）：盒子中存储元素距离盒子边框的距离
注意：由于使用了盒子模型。所以在页面中的元素实际的距离应为当前盒子内边距+当前盒子边框+当前盒子外边距+指定盒子外边距+指定盒子边框+指定盒子内边距
border-style:solid; （dotted,dashed,double)
border-width:1px;
border-color:#f00;
border:1px solid #0f0; （顺序：宽、样式、颜色
border-bottom-style:dotted; (top、right、left)
border-bottom-width:5px;
border-bottom-color:#F93;
border-bottom:3px double #90C注意：在进行边框设置时一般 样式宽度颜色一同设置（因为宽度默认3 颜色默认透明样式默认隐藏）
<style type="text/css">
div{
height: 300px;
width: 300px;
background-color: cornflowerblue;
}
.d1{
/* border-style: solid;
border-width: 20px;
border-color: crimson; */
/* 简化写法 */
border:10px solid greenyellow;
}
.d2{
/* border-left-style: solid;
border-left-width: 20px;
border-left-color:red ; */
border-left: 20px solid red;
/* border-right-style: solid;
border-right-width: 20px;
border-right-color:green ; */
border-right: 20px solid green;
/* border-bottom-style: solid;
border-bottom-width: 20px;
border-bottom-color:black ; */
border-bottom: 20px solid black;
/* border-top-style: dotted;
border-top-width: 20px;
border-top-color:black ; */
border-top: 20px dotted black;
}
</style>
</head>
<body>
<div class="d1">
</div>
<div class="d2">
</div>
</body>background-color:#f00;
background-image:url(../images/bg.jpg);
background-repeat:no-repeat; (repeat-x,repeat-y, repeat)
background-position:1px 3px ;
对应水平位置、垂直位置
数值单位：px 或%
也可以是关键字,水平：left,center,right,垂直：top,center,bottom
background-attachment:fixed;
background: #ff0 url(../images/bg.jpg) no-repeat fixed 10px 50%; .d3 {
height: 600px;
/* background-image: url("../img/sdwlb.gif");
background-repeat: no-repeat;
background-position: center;
background-attachment:fixed; */
background: #ff0 url(../img/sdwlb.gif) no-repeat fixed center;
}padding内边距
div的宽高如果没有指定 高度由内容与内边距决定，宽度默认一行
div{
background-color: turquoise;
/* padding-left: 50%;
padding:10px;//设置四周边距
padding:2px 5px; //设置上下 左右边距
padding:2px 3px 4px;//设置 上 左右 下边距
padding:1px 2px 3px 4px;//设置上 右 下 左 边距
padding:10px;
}
margin外边距
当前盒子距离父盒子边框的距离
margin-top:10px; (right,bottom,left)
margin:10px;
margin:2px 5px;
margin:2px 3px 4px;
margin:1px 2px 3px 4px;
margin:0 auto;<style type="text/css">
div {
height: 500px;
width: 500px;
background-color: tomato;
}
.d1 {
width: 100px;
height: 100px;
background-color: turquoise;
margin: 0 auto;
}
body {
margin: 0px;
}
</style>
</head>
<body>
<div>
<div class="d1">这是div中的内容</div>
</div>
</body>
<style type="text/css">
div {
height: 200px;
width: 200px;
}
.d1 {
background-color: tomato;
display: none;
/* 整个块都消失 在页面找不到相应存在 原位置会空出来 */
/* display: block; */
/* 原本的块级样式 前后自带换行符 */
/* display: inline; */
/* 整个块都消失 在页面可以找到存在 只不过0x0大小 */
/* display: inline-block; */
}
.d2 {
background-color: thistle;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
</body>颜色
在css中颜色的书写分为3中方式
颜色的英文标识
以三原色进行书写rgb(255,255,255)
以16进制进行书写#FF FF FF（如果存在连续的两个可以省略，仅当单个颜色重复时使用）
*256*
注意：本文归作者所有，未经作者允许，不得转载
