CSS学习笔记（二）

 /* 未访问过的链接  a：link   把没有访问过的链接选出来*/
        a:link {
            color: #333;
            text-decoration: none;
        }
        /* a:visited 选择点击过的链接 */
        a:visited {
            color: orange;
        }
        /* a:hover 选择鼠标经过的链接 */
        a:hover {
            color: skyblue;
        }
        /* a:active 选择的是鼠标按下还没有弹起鼠标的那个链接 */
        a:active {
            color: springgreen;
        }

注意事项：

为了确保生效按照LVHA的顺序声明 link visited hover active 。
因为a链接在浏览器中具有默认样式所以我们实际工作中都需要给链接单独指定样式。

2.5.2 focus伪类选择器（主要针对于表单元素）

focus伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般来说<input>类表单元素才能获取。

  /* 把获得光标的input表单元素选取出来 */
        input:focus {
            background-color: pink;
        }

三、CSS元素显示模式

了解元素的显示模式可以更好的让我们布局页面。

3.1 什么是元素的显示模式

作用：网页标签元素非常多，在不同的地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的页面。

元素显示模式：元素（标签以什么方式显示）。

HTML元素一般分为块元素和行内元素两种类型。

3.2 块元素

常见的块元素有<h1>~<h6>、<p>、<div> 、<ul> 、<ol>、 <li>等，其中<div>标签是最典型的块元素。

块级元素的特点：

独占一行。
高度，宽度，内外边距可以控制。
宽度默认是容器（父级元素）的100%。
是一个容器及盒子，里面可以放行内或者块级元素。

注意：

文字类的元素内不能使用块级元素
<p>标签主要用于存放文字，因此<p>里面不能放块级元素，同理<h1>~<h6>。

3.3 行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等
其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点：

相邻行内元素在一行上，一行可以显示多个
高，宽直接设置是无效的
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或其他行内元素

注意：

链接里面不能再放链接
特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全

3.4 行内块元素

在行内元素中有几个特殊的标签 —— <img />、<input />、<td>，它们同时具有块元素和行内元素的特点，有些资料称它们为行内块元素。

特点：

和相邻行内元素在一行上，但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)
默认宽度就是它本身内容的宽度(行内元素特点)
高度，行高，外边距以及内边距都可以控制(块级元素特点)

3.5 元素显示模式转换

即一个模式的元素需要另外一种模式的特性。

转换为块级元素：display：block；
转换为行内元素：display ：inline；
转换为行内块元素：display：inline-block；

3.6 单行文字垂直居中的代码

解决方案：让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中。

line-height=height;

原理：行高=上边距+文字本身高度+下边距

行高的上空隙和下空隙把文字挤到中间了
如果是行高小于盒子高度，文字会偏上，如果行高大于盒子高度，则文字偏下

四、CSS的背景

通过 CSS 背景属性，可以给页面元素添加背景样式。

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定

4.1 背景颜色（background-color）

  background-color: 颜色值;

颜色默认值为：transparent（透明）；

4.2 背景图片（background-image）

描述了元素的背景图像，实际开发常见于logo或者一些装饰性小图片或者超大背景图片。
优点是非常便于控制位置。

background-image: none/url(url);

none：无背景图
url：使用绝对或相对地址指定背景图像。

4.3 背景平铺（background-repeat）

 background-repeat: repeat|no-repeat|repeat-x|repeat-y;

 /* 背景图片不平铺 */
            background-repeat: no-repeat;
            /* 默认情况下，背景图片是平铺的 */
            background-repeat: repeat;
            /* 沿着X轴平铺 */
            background-repeat: repeat-x;
            /* 沿着y轴平铺 */
            background-repeat: repeat-y;

页面元素既可以添加背景颜色也可以添加背景图片，只不过背景图片会压住背景颜色。

4.4 背景图片位置（background-position）

利用background-position属性可以改变图片在背景中的位置.

  background-position:x y ;

参数代表的意思是：x坐标和y坐标。可以使用方位名词或者精确单位。

参数值	说明
length	百分数\|由浮点数字和单位标识符组成的长度值
position	top\| center \| bottom \|left \|center \|right 方位名词

1.参数是方位名词

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left。
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。

2.参数是精准单位

如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中

3. 参数是混合单位

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标

4.5 背景图像固定（background-attachment）

设置背景图像是否固定或者随页面的其余部分滚动

background-attachment: scroll | fixed;

4.6 背景复合写法

background ：背景颜色背景图片地址背景平铺背景图像滚动背景图片位置

background : transparent url(image.jpg) repeat-y fixed top;

4.7 背景色半透明

CSS3为我们提供了背景半透明的效果。

background : rgba(0,0,0,0.3);

最后一个参数是alpha透明度取值范围在0~1之间
我们习惯把0.3的 0省略掉，写为background(0,0,0,.3);
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响

五、CSS三大特性

css有三个非常重要的特性：层叠性，继承性，优先级。

5.1 层叠性

相同的选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。

层叠性主要解决样式冲突的问题。

原则：

样式冲突，遵循的原则是就近原则

5.2 继承性

子标签会继承父标签的某些样式，如文本颜色和字号。

恰当地使用继承可以简化代码，降低CSS样式复杂性
子元素可以继承父元素的样式（text- ,font ,line-这些元素开头的可以继承，以及color属性）

行高的继承：

行高可以跟单位也可以不跟单位
如果子元素没有设置行高，则会继承父元素的行高为1.5
此时子元素的行高为：当前子元素的文字大小*1.5

优势：子元素可以根据自己文字大小自动调整行高

 <style>
        body {
            color: pink;
            /* font: 12px/24px 'Microsoft YaHei'; */
            font: 12px/1.5 'Microsoft YaHei';
        }
        div {
            /* 子元素继承了父元素 body 的行高 1.5 */
            /* 这个1.5 就是当前元素文字大小 font-size 的1.5倍   所以当前div 的行高就是21像素 */
            font-size: 14px; 
        }
        p {
            /* 1.5 * 16 =  24 当前的行高 */
            font-size: 16px;
        }
        /* li 么有手动指定文字大小  则会继承父亲的 文字大小  body 12px 所以 li 的文字大小为 12px 
        
        当前li 的行高就是  12 * 1.5  =  18
        */
    </style>

5.3 优先级

当同一个元素指定多个选择器，就会有优先级的产生。

选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行

选择器	选择器权重
继承或者*	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式style	1，0，0，0
！important	无穷大

作用范围越大，权重越低，作用范围越小，权重越高（！important除外）

注意事项：

等级判断是从左到右，如果某一位数值相同，则判断下一位数值
继承的权重是0
权重可以叠加，但是永远不会有进位

5.4 优先级-权重叠加

如果是复合选择器，则会有权重叠加，需要计算权重。

<style>
       /* 复合选择器会有权重叠加的问题 */
       /* 权重虽然会叠加,但是永远不会有进位 */
       /* ul li 权重  0,0,0,1 + 0,0,0,1  =  0,0,0,2     2 */
        ul li {
            color: green;
        }
        /* li 的权重是 0,0,0,1    1 */
        li {
            color: red;
        }
        /* .nav li  权重    0,0,1,0  +  0,0,0,1  =  0,0,1,1    11 */
        .nav li {
            color: pink;
        }
    </style>

六、盒子模型

页面布局三大核心：盒子模型，浮动，定位

6.1 网页布局的本质

核心本质：利用CSS摆盒子

6.2 盒子模型

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框，内边距，外边距和实际内容。

6.3 边框（border）

border可以设置元素的边框。

边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色。

 border:border-width ||  border-style  ||  border-color

border-style中：

solid：实线边框
dashed：虚线边框
dotted：点线边框

边框的复合写法：

border: 1px solid red;

边框分开写法：

 border-top: 1px solid red;
            border-bottom: 10px dashed purple;

6.4 表格细线边框

border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

表示相邻边框合并在一起。

border-collapse: collapse;

6.5 边框会影响盒子实际大小

解决方案：

测量盒子大小的时候不包含边框
如果测量的时候需要边框，则需要width/height减去边框宽度

6.6 内边距（padding）

设置边框与内容之间的距离。

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

padding的复合属性：

顺时针方式进行设置。

值的个数	表达意思
padding：5px	1个值，代表上下左右都有5像素内边距
padding：5px 10px	2个值，代表上下内边距是5像素，左右内边距是10像素
padding: 5px 10px 20px;	3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素
padding :5px 10px 20px 30px	4个值，上是5像素，右是10像素，下20像素，左是30像素，顺时针

padding值会影响盒子实际大小：

如果盒子已经有了宽度和高度，此时再指定内边距，会撑大盒子。

当我们给盒子指定 padding 值之后，发生了2件事情：

内容和边框有了距离，添加了内边距
padding影响了盒子实际大小

也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子
解决方案：

如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。

padding不会撑开盒子的情况：

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。

6.7 外边距 (margin)

margin 属性用于设置外边距，控制盒子与盒子之间的距离。

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        /* .one {
            margin-bottom: 20px;
        } */
        .two {
            margin-top: 20px;
        }
    </style>

margin的简写方式代表的意义与padding完全一致。

外边距的应用：

外边距可以让块级盒子水平居中，但是必须满足两个条件：

盒子必须指定了宽度（width)
盒子左右的外边距都设置为auto
```
.header { width:960px; margin:0 auto;}
```

常见的写法：

margin-left：auto；margin-right：auto；

margin：auto；

margin：0 auto；

以上方法是让块级元素水平居中

行内元素或者行内块元素水平居中给其父元素添加text-align：center即可。

6.7 外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：

尽量只给一个盒子添加margin值

可以为父元素定义上边框
可以为父元素定义外边距
可以为父元素添加overflow：hidden；（不会改变盒子的大小）

6.8 清除内外边距

网页元素中很多都带有默认的内外边距，而且不同浏览器默认的也不一致。

因此我们在布局前，首先要清除下网页元素的内外边距。

 /* 这句话也是css布局的第一行代码 */
        * {
            margin:0;
            padding: 0;
        }

行内元素尽量只设置左右的内外边距（但是转化为块级和行内块元素就可以了）

6.9 综合案例

案例一

思路：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例</title>
    <style>
        * {
            margin:0;
            padding: 0;
        }
        body {
            background-color: #f5f5f5;
        }
        a {
            color: #333;
            text-decoration: none;
        }
        .box {
            height: 415px;
            width: 298px;
            /* 让块级盒子水平居中对齐 */
            margin: 100px auto;
            background-color: #fff;
        }
        .box img {
           width: 100%;
        }
        .review {
            height: 70px;
            font-size: 14px;
            /* 因为这个段落没有width属性，所以padding不会撑开盒子的宽度 */
            padding: 0 28px;
            /* 因为这个段落有height值，所以用padding的话会撑大盒子，使用margin-top就不会撑大盒子 */
            margin-top: 30px;
        }
        .pg {
            font-size: 12px;
            color: #b0b0b0;
            margin-top: 20px;
            padding: 0 28px;
        }
        .info {
            font-size :14px;
            margin-top: 15px;
            padding: 0 28px; 
        }
        .info  h4 {
            display: inline-block;
            font-weight: 400;
        }
        .info span {
            color: #ff6700;
        }
        .info em {
            font-style: normal;
            color: #ebe4e0;
            /* 上右下左 */
            margin: 0 6px 0 15px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="../images/img.jpg">
        <div class="review">
            <p>快递牛，整体不错，蓝牙可以说秒接，红米给力</p>
        </div>
        <div class="pg">来自于118273992的评价</div>
        <div class="info">
            <h4><a href="#">Redmi AirDots真无线蓝...</a></h4>
            <em>|</em>
             <span>99.9元</span>
            </div>
    </div>
   
</body>
</html>

案例二

品优购快报

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例2</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
      
        li {
             /* 去掉无序列表前面的小圆点 */
           list-style: none;
        }
        .box {
            width: 248px;
            height: 163px;
            border: 1px solid #ccc;
            margin: 100px auto;

        }
        .box h3 {
            height: 32px;
            border-bottom: 1px dotted #ccc;
            font-size: 14px;
            font-weight: 400;
            line-height: 32px;
            padding-left: 15px;

        }
        .box ul li {
            height: 23px;
            line-height: 23px;
            padding-left: 20px;
        }
       
       .box ul li a {
           font-size: 12px;
           color: #666;
           text-decoration: none;
       }
       .box ul li a:hover {
           text-decoration: underline;
       }

    </style>
</head>
<body>
    <div class="box">
        <h3>品优购快报</h3>
        <ul>
            <li><a href="#">【特惠】爆款耳机5折秒</a></li>
            <li><a href="#">【特惠】母亲节，健康好礼低至五折</a></li>
            <li><a href="#">【特惠】爆款耳机5折秒</a></li>
            <li><a href="#">【特惠】9.9元洗100张照片</a></li>
            <li><a href="#">【特惠】长虹智能空调立省1000</a></li>
        </ul>
    </div>
    
</body>
</html>

CSS3新增属性

七、圆角边框（重点）

border-radius属性用于设置元素的外边框圆角。

语法：

border-radius:length;

radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果。

注意：

参数值可以是数值或百分比的形式
如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半，或者直接写为50%
如果是一个矩形，设置为高度的一半就可以
这是一个简写属性，可以跟四个值，分别代表左上角，右上角，右下角，左下角（顺时针）

分开写：

border-top-left-radius、border-top-right-radius、 border-bottom-left-radius、 border-bottom-right-radius

八、盒子阴影（重点）

使用box-shadow属性为盒子添加阴影。

 box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需，水平阴影的位置，允许负值（正值靠右）
v-shadow	必需，垂直阴影的位置，允许负值（正值靠下）
blur	可选。模糊距离（影子的虚实）
spread	可选，阴影的尺寸（影子的大小)
color	可选，阴影的颜色
inset	可选，将外部阴影（outset）改为内部阴影

注意：

默认的是外阴影（outset）,但是不可以写这个单词，否则导致阴影无效
盒子阴影不占用空间，不会影响其他盒子排列

 /* 原先盒子没有影子，当我们鼠标经过盒子就添加阴影效果 */
        div:hover {
            box-shadow: 10px 10px 10px -4px rgba(0, 0,0, .3);
        }

九、文字阴影

在CSS3中，我们可以使用text-shadow属性将阴影应用于文本。

语法：

  text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊的位置
color	可选，阴影的颜色

欧泡果奶O

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记（二）

所学课程：b站pink老师---------------------------------------------------------------------------------------------------------------------------------一、Emmet语法Emmet语法的前身是Zen coding，它使用缩写，来提高html/css的编写速度，Vscode内部已经集成该语法。1.1 快速生成HTML结构语法生成标签直接输入标签名按tab键即
复制链接

扫一扫