web之CSS心得分享

1、CSS介绍

CSS指层叠样式表（Cascading Style Sheets)
样式定义如何显示ＨＴＭＬ元素
样式通常存储在样式表中
把样式添加到CSS文件中，是为了解决内容与变现分离的问题
外部样式表可以极大提高工作效率
尾部样式表通常存储在CSS文件中
多个样式定义可层叠为一个

2、两个常用容器

div

div（diversion）就是划分的意思。
主要是用来CSS布局用的，是常见的块级布局标签

span

span常见的行级布局标签，主要用来包裹文字的，给文字设置样式
作用：想通过CSS给文字调整大小，设置颜色，设置字体类型可以使用算盘标签

3、CSS语法

语法格式

CSS规则由两个主要的部分构成：选择器，以及一条或多条声明；

选择器：通常是您需要改变样式的HTML元素；

每条声明由一个属性和一个值组成。

属性（property）是妮妮希望设置的样式属性（style attribute）。

每个属性有一个值。属性和值被冒号分开

4、CSS的三种引入方式

行间引入：内联样式

弊端：重复代码、代码冗余、可读性极差、没有实现样式与结构的分离。

优点：书写简单、CSS样式的优先级

style = ”属性名1：属性值；属性名2：属性值；...”

内部引入：内部样式

缺点：没有从本子上实现样式与结构的分离。

优点：样式复用、代码精简、可读性强。

<style type="text/css">
    标签名{
        属性名1：属性值；
        属性名2：属性值；
        。。。
    }
</style>

外部引用：外部样式

样式写在CSS文件中，用link调用，link标签可以出现多次，用于连接外部的多个CSS文件

【注】如果有相同属性重复设置，则有覆盖效果，以最后一次设置为准，

.js文件中
标签名{
        属性名1：属性值；
        属性名2：属性值；
        。。。
    }
.html文件中
<head>
    <link rel = "stylesheet" type = "text/css" href = ".js文件路径" />
</head>

5、样式优先级

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

一般情况下，优先级如下：

内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

行间引用 > 内部引用 行间引用 > 外部引用

【注】内部引用、外部引用看引用的位置先后顺序，谁在后相同样式就一最后一个为准。

代码提示快捷键：Alt + /

6、常用的选择器

标签选择器

标签名（CSS声明）

id选择器

操作的前提：操作内容必须有id属性；
id的名称要求唯一；
+id名称（CSS声明）
场景：对于多个相同的标签，操作其中的一个。

类选择器/class选择器

.class名称（点class名称）
操作前提：操作内容必须有class属性
可以为多个内容设置相同class属性
场景：可以同时为多个内容设置CSS样式

后代选择器

后代选择器
找出指定的标签所有符合条件的后代标签，儿子级、孙子及重孙及。。。

div p{
    color: red;
} 
div标签下所有p标签设置为红色

子代选择器

找出指定的标签所偶符合条件的子代标签

标题名>子代标签名

div>p{
    color: blue;
}
div下子集p标签才会被设置为蓝色

示例

属性选择器

[title]选择所有包含title属性的内容；
[title="值"]选择所有包含title属性，并且值为“值”的内容

<style>
    [title]{
        color: red;
    }
    [title="num1"]{
        font-style: italic;
        font-size: 10px;
    }
</style>

<h2 title="num1">标题二</h2>
<h2 title="num2">标题二</h2>
<h2 title="num3">标题二</h2>

通配符选择器

*（CSS声明）
用途一：基本设置；
用途二：清除浏览器的默认样式

*{
    margin: 0;
    padding: 0;
}

first-child 伪类

您可以使用 :first-child 伪类来选择父元素的第一个子元素。

选择器匹配任何元素的第一个子元素的 <p> 元素：
p:first-child{
    color:blue;
}

选择器优先级

1.id选择器指定的样式 > 类选择器指定的样式 > 元素标签选择器指定的样式；

2. 对于相同类型选择器制定的样式，在样式表文件中，越靠后的优先级越高；

3. 如果要让某个样式的优先级变高，可以使用【!important】来指定；

7、常用标签样式

文本

color：设置文本样式

<div style="color: red;">一些文本。</div>

direction：设置文本方向

【注】倒序一定要加：unicode-bidi: bidi-override;

<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           div.ex1 {
               direction:rtl;
               unicode-bidi: bidi-override;
           }
       </style>
   </head>
   <body>
       <div>一些文本。默认的书写方向。</div>
       <div class="ex1">一些文本。 Right-to-left 方向。</div>
   </body>
</html>

letter-spaceing：设置字符间距

<p id="text" style="letter-spacing: 1px;">
    提供了非常灵活的变量命名策略。
    变量名是大小写敏感的，且不包含语义，
    意思是说
</p>

line-height：设置行高

<p id="text" style="line-height: 30px;">
    提供了非常灵活的变量命名策略。<br>
    变量名是大小写敏感的，<br>
    意思是说且不包含语义，
</p>

text-align：对齐元素的文本

<p id="text" style="text-align: center;">
    提供了非常灵活的变量命名策略。<br>
    变量名是大小写敏感的，<br>
    意思是说且不包含语义，
</p>

text-decoration：项文本添加修饰

主要是添加：下划线、上划线、删除线

格式：text-decoration：【1】【2】【3】【4】;

【1】【2】可以是：overline：上划线 line-through：删除线 underline：下划线

【3】可以是：dotted：虚线 wavy：波浪线

【4】颜色

【注】【1】必须有，其他可选。

<style type="text/css">
    #a1{/*上划线*/
        text-decoration: overline red;
    }
    #a2{/*删除线*/
        text-decoration: line-through red;
    }
    #a3{/*下划线*/
        text-decoration: underline red;
    }
    #a4{/*上下划线*/
        text-decoration: overline underline red;
    }
    #a5{/*下虚线*/
        text-decoration: underline dotted red;
    }
    #a6{/*下波浪线*/
        text-decoration: underline wavy red; 
    }
</style>

text-indent：缩进元素中文本的首行

<p style="text-indent:50px ">
 变量名是大小写敏感的，
 且不包含语义，意思是说，
 不会根据变量的名字来区别对待它们。 
 （译者注：不会自动将全大写的
 变量识别为常量，也不会将有特定前后
 缀的变量自动识别为某种特定类型的变量，
 即不会根据变量名字，自动判断变量的任何属性
 </p>

text-shadow：设置文本阴影

【格式】：text-shodow：h-shadow v-shadow blur color;

【参数】：h-shadow：必需。水平阴影的位置。允许负值。

v-shadow：必需。垂直阴影的位置。允许负值。

blur：可选。模糊的距离。

color：可选。阴影的颜色。
text-transform：控制元素中的字母

属性值：

none	默认。定义带有小写字母和大写字母的标准的文本。
capitalize	文本中的每个单词以大写字母开头。
uppercase	定义仅有大写字母。
lowercase	定义无大写字母，仅有小写字母。
inherit	规定应该从父元素继承 text-transform 属性的值。

unicode-bidi：设置或返回文本是否被重写

值	描述
normal	默认。不使用附加的嵌入层面。
embed	创建一个附加的嵌入层面。
bidi-override	创建一个附加的嵌入层面。重新排序取决于 direction 属性。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit

例：文字倒序，就需要将文本重写

<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
div.ex1
{
 direction:rtl;
 unicode-bidi:bidi-override;
}
</style>
</head>
<body>

<div>一些文本。默认的书写方向。</div>
<div class="ex1">一些文本 。从右向左的方向。</div>

</body>
</html>

vertical-align：设置元素的垂直对齐

对img的操作

<html>
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title></title>
 <style type="text/css">
 img.img1{
 vertical-align: calc(-50px);
 }
 img.img2{
 vertical-align: top;
 }
 img.img3{
 vertical-align: bottom;
 }
 </style>
 </head>
 <body>
 <p id="text">你好吗<img class="img1" width="100px" height="100px" src="img/123.png" >我很好</p>
 <p id="text">你好吗<img class="img2" width="100px" height="100px" src="img/123.png" >我很好</p>
 <p id="text">你好吗<img class="img3" width="100px" height="100px" src="img/123.png" >我很好</p>
 </body>
</html>

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的底端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值

white-space：设置元素中空白的处理方式

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

word-spacing：设置字间距

p{
 word-spacing:20px;
}

值	描述
normal	默认。定义单词间的标准空间。
length	定义单词间的固定空间。
inherit	规定应该从父元素继承 word-spacing 属性的值。

连接

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

【注】其中hover、active属性对所有标签都有效。
注意： 在 CSS 定义中，active 必须被置于 hover 之后，才是有效的。

列表

去掉样式

ul{
 list-style-type: none;
 padding: 0px;
 margin: 0px;
}

改变圆点

ul{
 list-style-type:circle;/*圆形*/
 list-style-type:square;/*方形*/
 list-style-type:upper-roman;/*大写罗马字母*/
 list-style-type:lower-roman;/*小写罗马字母*/
 list-style-type:lower-alpha;/*小写字母*/
 list-style-type:supper-alpha;/*大写字母*/
}

添加自定义图片作为点

ul{
 list-style-type:none;
 padding:0px;
 margin:0px;
}
ul li{
 background-image: url(https://www.runoob.com/try/demo_source/sqpurple.gif);
 background-repeat:no-repeat;
 /* background-size: 10px; */
 padding-left:14px;
}

表格

边框

td{
 border: 1px solid black;
}

文本居中

td{
 text-align:right;/*左右对齐*/
 vertical-align:middle;/*上下对齐*/
}

盒子模型

通常设置的width和height指的是content的宽高，但实际中浏览器中却要将padding、border、margin一起加起来。也就是下面的计算公式：

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距。

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距。

边框

基本设置格式

border：width color style；

border:1px red solid;

单独设置样式

border-style：属性1 属性2 属性3 属性4；【上->右->下->左】

border-style：属性1 属性2 属性3；【上->左右->下】

border-style：属性1 属性2；【上下->左右】

border-style：属性1；【上下左右属性相同】

属性	作用
none:	默认无边框
dotted:	定义一个点线边框
dashed:	定义一个虚线边框
solid:	定义实线边框
double:	定义两个边框。两个边框的宽度和 border-width 的值相同
groove:	定义3D沟槽边框。效果取决于边框的颜色值
ridge:	定义3D脊边框。效果取决于边框的颜色值
inset:	定义一个3D的嵌入边框。效果取决于边框的颜色值
outset:	定义一个3D突出边框。效果取决于边框的颜色值

块级元素和行级元素

块级标签

p、div、h1~h6、ul、ol、li、dl、dt、dd

行内标签

span、i、b

行内块级标签

img、input、select

块级和行内之间的转换

display:inline；转换成行内元素 display:block；转换为块级元素 display:inline-block；转换成行内块级元素 display:none；隐藏元素

【注】隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果：

display:none；隐藏的元素不会占用原来占据的空间
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

浮动

字面意思是浮起来，动起来。自身浮动到上一层不占据原有空间，根据属性（left、right）移动位置，其余元素重新排列。

【注】浮动的元素不会覆盖其他元素，而其他元素将环绕与其周围。

<style>
img 
{
 float:left;
}
</style>


<body>
<p>
浮动元素之前的元素将不会受到影响。
</p>
<p>
<img src="img/123.png" width="95" height="84" />
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含
框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边：
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含
框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边：
</p>

定位

格式

position：属性值；
top:20px;
bottom:30px;
left：30px;
right:90px
【注】任选两个即可定位；

属性值

属性值	作用
static	默认值，即没有定位，遵循正常的文档流对象。
fixed	元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：
relative	相对定位元素的定位是相对其正常位置。移动相对定位元素，但它原本所占的空间不会改变。
absolute	绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>;absolute 定位使元素的位置与文档流无关，因此不占据空间。
sticky	基于用户的滚动位置来定位。用于导航栏
z-index	z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

img{
 position:absolute;
 left:0px;
 top:0px;
 z-index:-1;
}

描述

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:

那么在使用绝对定位时需要将relative和absolute两个一起使用，relative用于父级，absolute用于子级。也就是大家所说的"子绝父相"。

例子：

#box2{
 border: 1px red solid;
 background-color: yellow;
 padding: 50px;
 width: 300px;
 height: 400px;
 margin-top: 50px;
 margin-left: 100px;
 position: relative;
}
#content{

 border: 1px black solid;
 background-color: greenyellow;
 width: 300px;
 height: 400px;
 position: absolute;
 top: 100px;
 left: 100px;
}
<div id="box2">
 <div id="content"></div>
</div>

注意事项

【注】绝对定位如果父级不使用position:relative，而直接使用position:absolute绝对定位，这个时候将会以body标签为父级，使用position:absolute定义对象无论位于DIV多少层结构，都将会浮动起来以<body>为父级（参考级）进行绝对定位。

【注】定位只针对于父级的border的内边为原点（0,0）来进行定位，及红色边。