css入门：day4—背景-优先级-显示模式

作者: 凯司机 | 来源:发表于2023-07-21 12:06 被阅读0次

通配选择器

语法：

<style>
    *{}
</style>

将页面中所有标签都选中

使用场景：通常设置*{padding:0;margin:0;}

伪类选择器

元素:link        正常的链接的状态
元素:visited   点击以后的状态
元素:hover     当鼠标移动上去的状态-------**重点、常用**
元素:active     当鼠标按下去时候的状态

总结：
1.伪类是选择器，不是css的属性，不能写在{}中
2.visited和link不能适用于普通标签，只有a标签才有
3.hover和active是任何标签都可以有的

伪对象选择器

语法：

元素:first-letter   选择第一个字符
元素:first-line       选择第一行

总结：
1.这是选择器，不是css属性，不能写在{}中
2.所谓的元素，可以是标签名，还可以是类名.class名:first-letter/line{}

相邻元素选择器

哥哥+弟弟{}  /*通过哥哥选择到弟弟 */

例：

<style>
    div+p{/* 兄弟选择器，哥哥标签+弟弟标签，，，，修饰的是弟弟 */
        color:red;  
    }
</style>
<div>第一个盒子</div>
<p>第一个段落</p>
<p>第二个段落</p>
<span>无用的标签</span>
<p>第三个段落</p>

总结：

1.哥哥和弟弟中间用的符号：`+`
2.修饰的是弟弟标签
3.不能通过弟弟选哥哥

关系选择器：后代(空格)，子元素(大于号)，兄弟(加号)

属性选择器

**[属性名]**

语法：

[属性名]{}

**[属性名=属性值]**

语法：

[属性名=属性值]{}

[属性名~=属性值]（选择多个值中的一个）

语法：

[属性名~=属性值]{}

[属性名|=属性值]（选择连字符值中的第一个单词）

语法：

[属性名|=属性值]{}

[属性名*=属性值]（选择包含当前值的元素）

语法：

[属性名*=属性值]{}

总结：
重点[属性名] 和[属性名=属性值]

行高属性

语法：

line-height:数字px;

代表的一行的高度，放在段落中，可以理解为是行距

总结：
1.文字在行高中是垂直居中的
2.行高通常用于让文字在盒子中垂直居中

背景属性

a：背景颜色

语法：background-color:颜色值

b：背景图片

语法：background-image:url(图片路径)

c：设置背景图片是否平铺

语法：background-repeat:值

取值：no-repeat不平铺，repeat-x横向平铺，repeat-y纵向平铺，repeat横向纵向都平铺------默认

d：设置背景图片位置

语法：background-position:水平位置，垂直位置

位置的取值可以为像素（相对左上角定点的位置），也可以为关键字：top left bottom right center

多学一招：

1.还可以使用百分比，不太常用：位置的固定规则为盒子自身的宽高百分比减去图片的宽高百分比，如下图：
2.在使用位置关键字的时候，关键字的前后顺序对结果不产生影响
3.可以只有一个值，代表水平方向和垂直方向都是这个值 ----此规则适用于关键字center,和百分比以及具体的像素
4.当只有一个值，且值为上下左右关键字时，上下左右只能代表x轴或y轴之一，另一个方向默认为center

e：设置背景图片大小

语法：background-size:宽度高度
宽高取值可以是像素也可以是百分比

f：综合使用

语法：background:颜色 url(图片路径) 平铺类型位置/大小
多学一招：属性中的每个值顺序可以调整，且background可以为单独其中之一设置

g：设置背景是否受滚动条的影响

语法：background-attachment:值
取值：

（1）scroll会受滚动条的影响，当内容滚动到下方，图片会消失----默认
（2）fixed不会受滚动条影响，一直保持在视线范围内

背景可以设置为透明

background:rgba();  /* a代表透明度，取值为0-1 */

背景和图片标签都可以让页面中显示图片，那有什么区别？
img和背景图片的区别：
img不需要专门写宽高就能够显示在页面上
而背景图片默认是撑不开容器的需要专门写宽高
一般产品插入图都推荐使用img 而一些小的icon 或者很少更新的图片再或者超大的图片推荐使用背景图
而且背景图可以让内部的文字盖在上面，但是img不行（除非后期用定位）

h：背景颜色渐变

①线性渐变

语法：

<linear-gradient>：linear-gradient([ <point>,]? <color-stop>[, <color-stop>]+);
<point>：[ left | right ]? [ top | bottom ]? || <angle>?
<color-stop>：<color> [ <length> | <percentage> ]?

取值：

<point>
    left： 设置左边为渐变起点的横坐标值。 
    right： 设置右边为渐变起点的横坐标值。 
    top： 设置顶部为渐变起点的纵坐标值。 
    bottom： 设置底部为渐变起点的纵坐标值。 
    <angle>： 用角度值指定渐变的方向（或角度）,单位deg。 
<color-stop>： 指定渐变的起止颜色。 <color-stop>
    <color>： 指定颜色。请参阅颜色值 
    <length>： 用长度值指定起止色位置。不允许负值 
    <percentage>： 用百分比指定起止色位置。

写法一：

代码：

<div></div>
<style type="text/css">
    div{
        width:300px;
        height:200px;
        background:linear-gradient(red,black); 
        /* 表示颜色从上往下，从红色到绿色转换，各占50%(默认) */
    }
</style>

写法二：

代码

<div></div>
<style type="text/css">
    div {
        width: 300px;
        height: 200px;
        background: linear-gradient(to right,red,black); 
        /* 表示颜色的渐变方向(也是九宫格) */
    }
</style>

写法三：

代码

<div></div>
<style type="text/css">
    div{
        width:300px;
        height:200px;
        background:linear-gradient(45deg,red,black); 
        /* 表示中间的水平线顺时针旋转10度开始渐变 */
    }
</style>

写法四：

代码

<style type="text/css">
    div{
        width:300px;
        height:200px;
        background:linear-gradient(red 20%,black 50%,pink); 
        /* 表示颜色渐变所占的百分比 */
    }
</style>

写法五：

代码

<style type="text/css">
    div{
        width:300px;
        height:200px;
        background:linear-gradient(to top right,red 20%,black 30%,pink); 
        /* 复合写法，表示颜色从左下角往右上角，从红色开始渐变到20%，再由黑色从20%渐变到30%，剩下的都是粉色 */
    }
</style>

颜色渐变方向有：to bottom、to top、to left、to right、to top right、to top left、to bottom left、to bottom right【其实就是一个四边形的四条边与四个角】

②径向渐变

语法：

<radial-gradient>：radial-gradient([ <position>,]? [ [ <shape> || <size> ] | <shape-size>{2},]? <color-stop>[, <color-stop>]+);
<position>：[ <length>① | <percentage>① | left | center① | right ]? [ <length>② | <percentage>② | top | center② | bottom ]?
<shape>：circle | ellipse
<size>：closest-side | closest-corner | farthest-side | farthest-corner | contain | cover
<shape-size>：<length> | <percentage> 
<color-stop>：<color> [ <length> | <percentage> ]?

取值：

<position>
    <percentage>①： 用百分比指定径向渐变圆心的横坐标值。可以为负值。 
    <length>①： 用长度值指定径向渐变圆心的横坐标值。可以为负值。 
    left： 设置左边为径向渐变圆心的横坐标值。 
    center①： 设置中间为径向渐变圆心的横坐标值。 
    right： 设置右边为径向渐变圆心的横坐标值。 
    <percentage>②： 用百分比指定径向渐变圆心的纵坐标值。可以为负值。 
    <length>②： 用长度值指定径向渐变圆心的纵坐标值。可以为负值。 
    top： 设置顶部为径向渐变圆心的纵坐标值。 
    center②： 设置中间为径向渐变圆心的纵坐标值。 
    bottom： 设置底部为径向渐变圆心的纵坐标值。 
<color-stop>： 指定渐变的起止颜色。 
<shape>
    circle： 指定圆形的径向渐变 
    ellipse： 指定椭圆形的径向渐变。写本文档时Chrome,Safari尚不支持该参数值 <size>
    closest-side： 指定径向渐变的半径长度为从圆心到离圆心最近的边 
    closest-corner： 指定径向渐变的半径长度为从圆心到离圆心最近的角 
    farthest-side： 指定径向渐变的半径长度为从圆心到离圆心最远的边 
    farthest-corner： 指定径向渐变的半径长度为从圆心到离圆心最远的角 
    contain： 包含，指定径向渐变的半径长度为从圆心到离圆心最近的点。类同于closest-side 
    cover： 覆盖，指定径向渐变的半径长度为从圆心到离圆心最远的点。类同于farthest-corner <shape-size>
    写本文档时Firefox尚不支持<shape-size> <percentage>： 用百分比指定径向渐变的横向或纵向直径长度，并根据横向和纵向的直径来确定是圆或椭圆。不允许负值。 
    <length>： 用长度值指定径向渐变的横向或纵向直径长度，并根据横向和纵向的直径来确定是圆或椭圆。不允许负值。 <color-stop>
    <color>： 指定颜色。请参阅颜色值 
    <length>： 用长度值指定起止色位置。不允许负值 
    <percentage>： 用百分比指定起止色位置。

写法一：

代码

<div></div>
<style type="text/css">
    div{
        width:300px;
        height:200px;
        background:radial-gradient(orange,black);
        /* 从中心点向四周扩散渐变 */
    }
</style>

多学一招：div如果是正方形，扩散的形状会是圆形

<div></div>
<style type="text/css">
    div{
        width:200px;
        height:200px;
        background:radial-gradient(orange,black);
    }
</style>

写法二：

代码

<div></div>
<style type="text/css">
    div{
        width:200px;
        height:200px;
        background:radial-gradient(orange 20%,black 30%,red 70%);
        /* 代表颜色扩散到哪个位置停止渐变 */
    }
</style>

多学一招：除了使用百分比还可以使用具体像素设置停止渐变的位置

<div></div>
<style type="text/css">
    div{
        width:200px;
        height:200px;
        background:radial-gradient(orange 50px,black 30%,red 70%);
        /* 橘色区域半径50px */
    }
</style>

因为50像素已经超过30%，所以橘色部分没有渐变（试试橘色和黑色都是30%）

写法三：

代码：

<div></div>
<style type="text/css">
    div{
        width:300px;
        height:200px;
        background:radial-gradient(circle,orange 10%,black 50%);
        /* 指定渐变的形状 */
    }
</style>

注意：指定形状的时候可以是circle圆形，也可以是ellipse椭圆

写法四：

代码：

<div></div>
<style type="text/css">
    div{
        width:300px;
        height:200px;
        background:radial-gradient(circle 100px,orange 10%,black 50%);
        /* 指定渐变的区域大小，因为是圆形，所以代表宽100px高也是100px */
    }
</style>

注意：如果指定的<font color="red">形状</font>是圆形，那么指定区域大小的时候只需要一个值就好，可要是椭圆形的时候需要两个值，因为椭圆的宽和高不一样，否则直接不能显示页面

<style type="text/css">
    div{
        width:300px;
        height:200px;
        background:radial-gradient(ellipse 200px 100px,orange 10%,black 50%);
        /* 指定椭圆形的区域大小需要两个值一个宽一个高 */
    }
</style>

写法五：

代码：

<div></div>
<style type="text/css">
    div{
        width:300px;
        height:200px;
        background:radial-gradient(ellipse 200px 100px at right bottom,orange 10%,black 50%);
        /* 指定径向渐变的圆心 */
    }
</style>

多学一招：圆心默认在中心，或者使用关键字center

③重复线性渐变

语法：

repeating-linear-gradient(方向,颜色 结束百分比,...);

例：

<div></div>
<style type="text/css">
    div{
        width:300px;
        height:200px;
        background:repeating-linear-gradient(to right bottom,red 10%,green 20%);
        /* 渐变方向为右下角，指定每种颜色的结束位置，重复渐变 */
    }
</style>

④重复径向渐变

语法：

repeating-radial-gradient(形状 方向,颜色 结束百分比,...;

例：

<div></div>
<style type="text/css">
    div{
        width:300px;
        height:200px;
        background:repeating-radial-gradient(ellipse at center,red 10%,green 20%);
        /* 渐变形状为椭圆，渐变中心为中心，指定每种颜色的结束位置，重复渐变 */
    }
</style>

注意：未指定颜色值的结束位置时，颜色是平均分配的

列表属性

1.list-style-type

设置列表前缀样式，通常设置为none，去掉前缀
语法：list-style-type:none

2.list-style-image

将列表前缀设置为自定义图片
语法：list-style-image:url(图片路径)

应用场景：通常在网页中，使用的列表都是要去除前面的符号，并且去除左边和上边的空间，所以，样式如下：

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

内容溢出

语法：overflow:值
取值：auto当内容溢出时，生成滚动条------默认，hidden内容溢出时超出部分隐藏
总结：
overflow取值：
auto----自动生成滚动条（右边）
hidden----超出部分隐藏
scroll----右边和下边都有滚动条
设置水平方向溢出可以使用overflow-x，纵向溢出使用overflow-y，取值和overflow一样
<font color="red">重点：overflow:hidden;超出部分隐藏</font>

网页调试（重点）

开发者工具对于开发者来说特别重要，只要你开发你就离不开它。一定要学会使用
作用：调试代码检测代码的！！
在网页中点击右键，选择（审查元素/查看元素/检查）或者按F12，在右侧或下面会打开一个窗口，窗口最左边是查看html的结构，network是查看网页的http请求加载，console是控制台，查看网页中打印的信息，也可以自己写调试代码，source中是网页的所有资源。
在结构中点击标签，会在右侧显示对应的css。如果写错了，可以看到css样式中有一条横线，表明样式未生效。
netwrok中会看到http请求的次数，以及加载的资源。

主要掌握elements这个面板右侧的style就是当前标签对应的css样式我们可以通过这个来检查代码错误和调试代码！！

css样式的分类

1.内部样式----内联样式

使用的是style标签

<style type="text/css">
/* 样式 */
</style>

多学一招：把页面的公共样式（不多的情况下）写在style标签中

2.行内样式

直接写在标签上的style属性中

<div style="color:red;">
    我是盒子
</div>

多学一招：通常是后台程序员进行修改页面的时候使用

3.外部样式

新建一个css文件，然后和html页面关联起来

a：使用标签关联

<!-- 在html的head标签中 -->
<link rel="stylesheet" type="text/css" href="css文件路径">

b：使用指令关联

<style type="text/css">
/* 在style标签中 */
    @import url("css文件路径")
</style>

多学一招：做项目最常用的是外部样式，link标签

三种样式表总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	没有实现样式和结构相分离	较少	控制一个标签（少）
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面（中）
外部样式表	完全实现结构和样式相分离	需要引入	最多，强烈推荐	控制整个站点（多）

样式的继承和覆盖（重点）

当父标签设置了样式，子标签都会具有父标签的样式

总结：

1.能继承的css属性：font系列，text系列，color，line-height
2.div可以继承父亲的宽度，高度不能继承

当子标签和父标签设置了同样属性的css，子标签会覆盖父标签的设置

总结：

继承：父元素设置了样式，子元素也具有了
覆盖：父元素和子元素有同样的样式，生效的是子元素，子元素覆盖了父元素的样式

样式的优先级（了解）

1.强制优先级（important）

语法：样式属性:值 !important;

注意：只针对当前这一条css属性

2.选择器优先级

伪对象选择器>!important>行内样式>id选择器>class选择器>标签选择器>通配选择器>继承

3.伪对象选择器的优先级（了解）

首字符>首行

4.样式分类优先级

行内样式>内部样式/外部样式

总结：

1.样式分类中：行内样式>内部/外部，内部样式和外部样式没有权重之分，关键是看他们的加载顺序，后面的会覆盖前面的
2.伪类首字>伪类首行>!important>id名>类名/属性>标签名>通配
3.容易被覆盖的选择器，应该写在前面，以便于后面的选择器覆盖它

5.样式叠加（权重）

!important(无穷大) 行内样式(1000) id(100) class(10) 标签(1)

总结：掌握一个点：人多力量大 .class<.class标签
继承来的样式不计算权重，也就是说关键看是不是直接修饰的目标标签
权重累计到10，不会往前进一位

选择器	权重
继承或者* 的贡献值	0,0,0,0
每个元素（标签）贡献值为	0,0,0,1
每个类，伪类贡献值为	0,0,1,0
每个ID贡献值为	0,1,0,0
每个行内样式贡献值	1,0,0,0
每个!important贡献值	无穷大

总结：
1.比较权重的前提是准确选择到元素，而不是继承来的样式
2.每一级满10也不会往前进1，等级是非常森严的

标签的显示模式（重点）

div和span标签
1.样式完全相同，标签不同，显示的结果完全不同
2.每个div会独占一行，多个span会并列一排

1.块元素

特点：宽度默认是100%，高度默认是0，可以设置宽度和高度，会继承父级的宽度，换行显示---div ul li p h1

总结：块元素可以添加宽高的属性，独占一行

2.行元素

特点：宽高默认都是0，不能设置宽和高，一行显示----span b i u a
总结：对宽高不敏感，不能独占一行

3.行内的块元素

特点：只能设置宽和高，不能换行显示---img input
多学一招：从大的方面来说，其实行内的块元素也属于行内元素，对行内元素的某些操作，同样可以操作行内的块元素，例：text-align:center;line-height:1000px;

4.模式转换

语法：display:值
取值：block转成块元素，inline转成行元素，inline-block转成行内的块元素，none隐藏元素

多学一招：使用该属性隐藏元素后，在页面中将不占据空间

小案例：简易导航的制作

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        a{
            display:inline-block;
            width:100px;
            height:50px;
            background:#f00;
            text-align:center;
            text-decoration:none;
            color:#fff;
            line-height:50px;
        }
        body{text-align:center;}
    </style>
</head>
<body>

<a href="">导航</a>
<a href="">导航</a>
<a href="">导航</a>
<a href="">导航</a>
<a href="">导航</a>
<a href="">导航</a>

</body>
</html>

文本属性

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<style>
    p{ text-indent:2em;}
</style>
<h1>html概述</h1>
<p>HTML是HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或htm。
</p>
<p>下面是HTML的特征代码：
</p>
<p>
&lt;div>这是成对出现的标签&lt;/div>
</p>
</body>
</html>

忆江南

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
    h1{ color:#00CCCC; text-align:center; font-size:18px;}
    h6{ text-align:center;}
    p{ text-indent:2em; color:#2268D3;}
    h3{ color:#990000;}
</style>
<body>

<h1>忆江南</h1>
<h6>唐.白居易</h6>
<p>
江南好，风景旧曾谙。(2) 日出江花红胜火，春来江水绿如蓝，(3) 能不忆江南。
</p>
<h3>作者介绍</h3>
<p>
白居易(772－846) ，字乐天，太原(今属山西)人。唐德宗朝进士，元和三年(808)拜左拾遗，后贬江州(今属江西)司马，移忠州(今属四川)刺史，又为苏州(今属江苏)、同州(今属陕西大荔)刺史。晚居洛阳，自号醉吟先生、香山居士。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐大家。也是早期词人中的佼佼者，所作对后世影响甚大。</p>
<h3>注释</h3>
<p>
(1)据《乐府杂录》，此词又名《谢秋娘》，系唐李德裕为亡姬谢秋娘作。又名《望江南》、《梦江南》等。分单调、双调两体。单调二十七字，双凋五十四字，皆平韵。(2)谙(音安)：熟悉。(3)蓝：蓝草，其叶可制青绿染料。
</p>
<h3>品评</h3>
<p>
此词写江南春色，首句“江南好”，以一个既浅切又圆活的“好”字，摄尽江南春色的种种佳处，而作者的赞颂之意与向往之情也尽寓其中。同时，唯因“好”之已甚，方能“忆”之不休，因此，此句又已暗逗结句“能不忆江南”，并与之相关阖。次句“风景旧曾谙”，点明江南风景之“好”，并非得之传闻，而是作者出牧杭州时的亲身体验与亲身感受。这就既落实了“好”字，又照应了“忆”字，不失为勾通一篇意脉的精彩笔墨。三、四两句对江南之“好”进 　行形象化的演绎，突出渲染江花、江水红绿相映的明艳色彩，给人以光彩夺目的强烈印象。其中，既有同色间的相互烘托，又有异色间的相互映衬，充分显示了作者善于著色的技巧。篇末，以“能不忆江南”收束全词，既托出身在洛阳的作者对江南春色的无限赞叹与怀念，又造成一种悠远而又深长的韵味，把读者带入余情摇漾的境界中。 
</p>
</body>
</html>

综合案例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<style>
    h1,h5{ font-weight:normal; text-align:center;}
    h5>span{ color:orange;}
    .num{ color:red; text-decoration:underline;}
    .collect{ color:red; font-weight:bold;}
    p{ text-indent:2em;}
    p span{ color:#abcdef;}
</style>
<h1>中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h1>
<h5>2017年07月16日20:11 <span>新浪体育 评论中大奖</span> （<span class="num">11</span>人参与） <span class="collect">收藏本文</span></h5>
<p>
新浪体育讯　7月16日是燕京啤酒<span>[微博]</span>2017中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。
</p><p>
在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。
</p><p>
据记者多方了解的情况，李虎[微博]极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。
</p><p>
这样的情况并没有影响到丽江嘉云昊队[微博]的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。
</p>
</body>
</html>

搜索作业

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<style>
    h2{ font-weight:normal;}
    h2 a{ color:red;}
    h2 a span{ color:blue;}
    p span{ color:red;}
    p a{ color:lime;}
</style>
<h2><a href="#">HTML <span>&lt;</span>div<span>></span>标签</a></h2>



<p>不必为每一个&lt;<span>div</span>都加上类或id，虽然这样做也有一定的<span>好处</span>。可以对同一...&lt;<span>div</span>><span>标签</span>支持<span>HTML</span>中的全局属性。事件属性&lt;div>标签支持HTML中的事件...</p>
<p><a href="#">w3school.com.cn... <img src=""></a>-百度快照</p>

</body>
</html>

通配选择器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
    *{ color:#F00;
        padding:0;
        margin:0;
    }/* *代表所有标签 */
    div{
        width:200px;
        height:200px;
        background:#f00;    
    }
</style>
<body>

<div>组成</div>
<p>好几个房间</p>
<span>去玩儿</span>
<i>阿斯顿发给</i>

</body>
</html>

伪类选择器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
    /*a:link{color:green;} 正常链接 */
    
    /*a:visited{ color:green;}  链接点击以后 */
    
    a:active{ color:green;} /* 链接按下去 */
    
    a:hover{ /* 鼠标放上去 */
        font-size:30px;
    }
    div:hover{
        font-size:50px;
        color:green;    
    }
    div:active{
        color:blue; 
    }
    /*div:visited{
        color:yellow;   
    }*/
    div:link{
        color:yellow;   
    }
</style>
<body>
<a href="#####">百度</a>

<div>这是个段落</div>
</body>
</html>

伪类选择器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
    .box{
        width:200px;
        height:200px;
        background:#abcdef; 
    }
    .box:hover .box1{/* 代表鼠标放到.box上，对.box里面的.box1修饰 */
        width:300px;
        height:300px;
        background:#0F0;    
    }
</style>
<body>

<div class="box">
    <div class="box1"></div>
</div>

</body>
</html>

伪对象

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<style>
    p:first-letter{ /* 伪对象first-letter，选择器，选择第一个字 */
        font-size:20px;
        color:red;  
    }
    
    div:first-line{ /* 伪对象first-line，选择第一行 */
        color:green;    
    }
</style>
<div>
    自亚欧大陆东端，沿古丝绸之路方向一路往西，飞越亚平宁半岛，南下西西里、北上法兰西。国家主席习近平2019年首次出访，来到了欧洲。
意大利、摩纳哥、法国。3月21日至26日，6天5夜，三国五城，出席40多场双多边活动，话友谊、论责任、谈合作、谋发展……“我们对时间的理解，是以百年、千年为计。”习近平主席这样对意大利总理孔特说。面对世界百年未有之大变局，中国同欧洲，赓续时间积淀的友谊，承载时代赋予的使命，为世界和平稳定，为全球发展繁荣，携手前行。
</div>
<h1>我爱学习</h1>
<p>我爱杯中酒，</p>
<p>爱之不敢求。</p>
<p>学道北海仙，</p>
<p>习之势翩翩。</p>
</body>
</html>

兄弟选择器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<style>
    div+p{/* 兄弟选择器，哥哥标签+弟弟标签，，，，修饰的是弟弟 */
        color:red;  
    }
    div+p+p+p{ color:blue;}/* 可以连续选 */
</style>
<div>第一个盒子</div>
<p>第一个段落</p>
<p>第二个段落</p>
<p>第二个段落</p>
<span>无用的标签</span>
<p>第三个段落</p>
</body>
</html>

属性选择器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<style>
    /* 属性选择器[属性名] */
    /*[age]{
        width:200px;
        height:50px;
    }*/
    /* [属性名=属性值] */
    /*[name=password]{
        color:red;  
    }*/
    /* 多个值的其中一个 */
    /*[name~="uuu"]{ color:lime;}*/
    
    /* 选择连字符连接的值中的第一个单词 */
    /*[name|="username"]{ color:lime;}*/
    /* 匹配的是多个值/连字符/多单词/多字母   带有其中某个字母的元素 */
    /*[name*="y"]{ color:red;}*/
    
    [type="text"]{color:Red;}
</style>
<form>
    <input type="text" name="username-aaa rty poiuo" age="12">
    <input type="password" name="password-aaa fghj zxc">
    <input type="submit">
</form>

</body>
</html>

行高选择器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<style>
    /*div{
        width:100px;
        background:#eee;
        
        line-height:30px;   
    }*/
</style>
<!-- <div>
    锄禾日当午，汗滴禾下土。谁知盘中餐，粒粒皆辛苦。
    离离原上草，一岁一枯荣。野火烧不尽，春风吹又生。
</div>  -->
<style>
    div{ width:200px; height:100px; background:#ddd;
        line-height:100px;
    }
</style>
<div>
    九月九日忆山东兄弟
</div>

</body>
</html>

背景

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<style>
    div{
        width:500px;
        height:500px;
        /* 背景颜色：background-color */
        /*background-color:#f00;*/
        /* 背景图片：background-image  图片默认是平铺的 */
        /*background-image:url(1.png);  */
        /* 设置背景平铺：background-repeat:repeat（平铺）/no-repeat（不平铺）/repeat-x（横向平铺）/repeat-y（纵向平铺） */
        /*background-repeat:repeat-y;*/
        /*background-image:url(3.jpg);*/
        
        /* 调整背景图的大小:background-size:第一个值是宽度，第二个值是高度 */
        /*background-size:200px 200px;*/
        /*background-image:url(jiantou.png);
        background-repeat:no-repeat;*/
        /* 调整背景图的位置：backgkround-position
        第一个值代表水平距离，第二个代表垂直距离
         */
        /*background-position:20px 4px;*/
        
        background-image:url(1.png);
        background-repeat:no-repeat;
        background-color:#abcdef;
        /* 背景定位使用关键字：top/bottom/left/right/center */
        /*background-position:bottom center;*/
        /* 背景定位使用百分比 */
        background-position:50% 50%;
    }
</style>
<div>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我的好友
</div>

</body>
</html>

背景的综合使用

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<!-- 颜色，图片，平铺，大小，定位 -->
<body>
<style>
    div{
        width:200px;
        height:200px;
        /* background：颜色 图片路径 是否平铺 定位/大小 */
        background:#abcdef url(1.png) no-repeat right bottom/100px 100px;   
    }
</style>
<div>
    这是盒子
</div>

</body>
</html>

设置背景是否收到滚动条的影响

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<style>
    body{
        background:url(1.png) no-repeat #00f;   
        /* 设置背景图不受滚动条的影响：backgrounbd-attchment:fixed; */
        background-attachment:fixed;
        
    }
</style>

    鹅鹅鹅，<br>
    曲项向天歌，<br>
    白毛浮绿水，<br>
    红掌拨清波。<br>
    鹅鹅鹅，<br>
    曲项向天歌，<br>
    白毛浮绿水，<br>
    红掌拨清波。<br>
    鹅鹅鹅，<br>
    曲项向天歌，<br>
    白毛浮绿水，<br>
    红掌拨清波。<br>
    鹅鹅鹅，<br>
    曲项向天歌，<br>
    白毛浮绿水，<br>
    红掌拨清波。<br>
    鹅鹅鹅，<br>
    曲项向天歌，<br>
    白毛浮绿水，<br>
    红掌拨清波。<br>
    鹅鹅鹅，<br>
    曲项向天歌，<br>
    白毛浮绿水，<br>
    红掌拨清波。<br>
    曲项向天歌，<br>
    白毛浮绿水，<br>
    红掌拨清波。<br>
    鹅鹅鹅，<br>
    曲项向天歌，<br>
    白毛浮绿水，<br>
    红掌拨清波。<br>
    鹅鹅鹅，<br>
    曲项向天歌，<br>
    白毛浮绿水，<br>
    红掌拨清波。<br>
    鹅鹅鹅，<br>
    曲项向天歌，<br>
    白毛浮绿水，<br>
    红掌拨清波。<br>
    鹅鹅鹅，<br>
    曲项向天歌，<br>
    白毛浮绿水，<br>
    红掌拨清波。<br>
    鹅鹅鹅，<br>
    曲项向天歌，<br>
    白毛浮绿水，<br>
    红掌拨清波。<br>
    曲项向天歌，<br>
    白毛浮绿水，<br>
    红掌拨清波。<br>
    鹅鹅鹅，<br>
    曲项向天歌，<br>
    白毛浮绿水，<br>
    红掌拨清波。<br>
    鹅鹅鹅，<br>
    曲项向天歌，<br>
    白毛浮绿水，<br>
    红掌拨清波。<br>
    鹅鹅鹅，<br>
    曲项向天歌，<br>
    白毛浮绿水，<br>
    红掌拨清波。<br>
    鹅鹅鹅，<br>
    曲项向天歌，<br>
    白毛浮绿水，<br>
    红掌拨清波。<br>
    鹅鹅鹅，<br>
    曲项向天歌，<br>
    白毛浮绿水，<br>
    红掌拨清波。<br>
    曲项向天歌，<br>
    白毛浮绿水，<br>
    红掌拨清波。<br>
    鹅鹅鹅，<br>
    曲项向天歌，<br>
    白毛浮绿水，<br>
    红掌拨清波。<br>
    鹅鹅鹅，<br>
    曲项向天歌，<br>
    白毛浮绿水，<br>
    红掌拨清波。<br>
    鹅鹅鹅，<br>
    曲项向天歌，<br>
    白毛浮绿水，<br>
    红掌拨清波。<br>
    鹅鹅鹅，<br>
    曲项向天歌，<br>
    白毛浮绿水，<br>
    红掌拨清波。<br>
    鹅鹅鹅，<br>
    曲项向天歌，<br>
    白毛浮绿水，<br>
    红掌拨清波。<br>
</body>
</html>

背景透明

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
    body{
        background:url(1.png);  
    }
    div{
        width:200px;
        height:200px;
        background:rgba(0,0,255,0.5);/* 有兼容问题 */    
    }
</style>
<body>

<div class="box"></div>

</body>
</html>

线性渐变

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
    .box{
        width:500px;
        height:200px;
        /* 线性渐变:background:linear-gradient(to 方向,颜色 color-stop,...) */
        background:linear-gradient(to right,red,orange,yellow,green,cyan,blue,purple);  
    }
</style>
<body>

<div class="box"></div>

</body>
</html>

径向渐变

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
    .box{
        width:300px;
        height:200px;
        background:radial-gradient(circle 100px,red 20%,green 50%);
    }
</style>
<body>
<div class="box"></div>
</body>
</html>

属性选择器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
    ul{
            /* 设置列表前面的符号 */
        /*list-style-type:none; */
        /* 使用自定义图片做列表前面的符号 */
        /*list-style-image:url(jiantou.png);*/
        list-style:none;
        
        padding:0;
        margin:0;
    }
</style>
<body>
<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>

</body>
</html>

内容溢出

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
    div{
        width:100px;
        height:191px;
        background:#0f0;
        /* 内容溢出处理 */    
        /*overflow:scroll;*/
        overflow-x:hidden;
        background:url(1.png);
    }
</style>
<body>
<div>
    <!--鹅鹅鹅，<br>
    曲项向天歌，<br>
    白毛浮绿水，<br>
    红掌拨清波。<br>
    鹅鹅鹅，<br>
    曲项向天歌，<br>
    白毛浮绿水，<br>
    红掌拨清波。<br>-->
    asdfasdfasdfasdfasdfasdfasdfasdfasdfasdf<br>
    asdfasdfasdfasdfasdfasdfasdfasdfasdfasdf<br>
    asdfasdfasdfasdfasdfasdfasdfasdfasdfasdf<br>
    asdfasdfasdfasdfasdfasdfasdfasdfasdfasdf<br>
    asdfasdfasdfasdfasdfasdfasdfasdfasdfasdf<br>
    asdfasdfasdfasdfasdfasdfasdfasdfasdfasdf<br>
    asdfasdfasdfasdfasdfasdfasdfasdfasdfasdf<br>
    asdfasdfasdfasdfasdfasdfasdfasdfasdfasdf<br>
    asdfasdfasdfasdfasdfasdfasdfasdfasdfasdf<br>
</div>
</body>
</html>

样式分类

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<!-- 外联样式：做项目用 -->
<!--<link rel="stylesheet" type="text/css" href="21-demo.css">-->
</head>
<style>
    /*@import url(21-demo.css);*/
    /* 内联样式 */
    /*div{
        width:200px;
        height:200px;
        background:#0f0;        
    }*/
</style>
<body>

<!-- 行内样式：后期做修改使用 -->
<div style="width:100px;height:100px;background:#f00;"></div>
<div></div>
<img src="https://tse1.mm.bing.net/th?id=OIP.eDlXDmViL5i3hPpvlvtkHwHaHa&pid=Api&rs=1&p=0">
</body>
</html>

样式继承和覆盖

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<style>
    .box{
        color:red;  
        font-size:30px; 
        line-height:100px;
    }
    p{
        color:green;/* 父元素和子元素css产生冲突，以子元素为准 */ 
    }
</style>
<div class="box">
    这是div的内容
    <p>这是个段落</p>
</div>

</body>
</html>

样式的优先级

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<!--<link rel="stylesheet" type="text/css" href="23-demo.css">-->
</head>

<body>
<!--
样式分类的优先级：
    行内样式>  内部样式/外部样式
    内部样式和外部样式不存在优先级问题，谁后渲染（加载）谁生效
-->

<!--
伪类首字>伪类首行>!important>id名>类名/属性>标签名>通配
-->
<style>
    *{
        color:pink !important;  
    }
    #myid{
        color:blue; 
    }
    .box{
        color:green;    
    }
    /*div:first-letter{
        color:brown;    
    }
    div:first-line{
        color:yellow;   
    }*/
    [name="zhangsan"]{
        color:purple;   
    }
    div{
        /*width:100px;
        height:100px;*/
        /* !important强制优先 */
        /*background:#f00 !important;   */
        
        
        color:red;
    }
</style>
<div class="box" id="myid" name="zhangsan">
    明日复明日，<br>
    明日何其多！
</div>
</body>
</html>

样式的权重叠加

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
    .box{
        color:green;    
    }
    p{
        color:red;  
    }
    p .s{ /* 1 10 */
        color:purple;   
    }
    .box span{/* 10 1 */
        color:yellow;   
    }
</style>
<body>

<div class="box">
    盒子
    <p class="pp">  
        段落
        <span class="s">文字</span>
    </p>
</div>

</body>
</html>

显示模式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
    div,span,img{
        width:200px;
        height:200px;
        background:#abcdef; 
    }
    
</style>
<body>

<div>这是盒子</div>
<div>这是盒子</div>
<span>这是文字</span>
<span>这是文字</span>
<img src="1.png">
</body>
</html>

显示魔

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
    span{
        width:200px;
        height:200px;   
        background:#f00;
        /* 模式转换：转为块元素 */
        display:inline-block;
    }
    div{
        width:200px;
        height:200px;
        background:#0f0;
        /* 转为行内元素 */
        display:inline-block;   
    }   
</style>
<body>
<span>这是文字</span>
<div>这是盒子</div>
</body>
</html>

导航

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>导航</title>
    <style type="text/css">
        .nav{
            height:50px;
            background:#aaa;
            text-align:center;
        }
        a{
            display:inline-block;
            width:100px;
            height:50px;
            color:#3C3C3C;
            text-decoration:none;
        }
        a.orange{
            color:#FF4400;
        }
        a:hover{
            background:#D5D7DD;
            text-decoration:underline;
            color:#FF4400;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#" class="orange">天猫</a>
        <a href="#" class="orange">聚划算</a>
        <a href="#" class="orange">超市</a>
        <a href="#" class="orange">头条</a>
        <a href="#">阿里旅行</a>
        <a href="#">电器城</a>
        <a href="#">淘抢购</a>
        <a href="#">苏宁易购</a>
        <a href="#">智能生活</a>
    </div>
</body>
</html>

导航副本

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>导航</title>
    <style type="text/css">
        a{
            display:inline-block;
            width:120px;
            height:50px;
            background:url(blue_bg.png);
        }
        a:hover{
            background:url(yellow_bg.png);
        }
    </style>
</head>
<body>
    <a href="#">百度</a>
    <a href="#">百度</a>
    <a href="#">百度</a>
    <a href="#">百度</a>
    <a href="#">百度</a>
</body>
</html>

家具大视野

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>家具大视野</title>
    <style type="text/css">
        .box{
            width:950px;
            background:url(image/bg.jpg) repeat-x;
            text-align:center;
        }
        a{
            width:175px;
            height:259px;
            display:inline-block;
            background:url(image/li_bg.jpg);
            color:#333;
            text-decoration:none;
        }
        a span{
            line-height:50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>家具大视野</h1>
        <a href="#">
            <img src="image/bj01.jpg" />
            <span>室外居家空间设计</span>
        </a>
        <a href="#">
            <img src="image/bj02.jpg" />
            <span>室外居家空间设计</span>
        </a>
        <a href="#">
            <img src="image/bj03.jpg" />
            <span>室外居家空间设计</span>
        </a>
        <a href="#">
            <img src="image/bj04.jpg" />
            <span>室外居家空间设计</span>
        </a>
        <a href="#">
            <img src="image/bj05.jpg" />
            <span>室外居家空间设计</span>
        </a>
    </div>
</body>
</html>

模拟新浪导航

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>模拟新浪导航</title>
    <style type="text/css">
        .box{
            border-top:3px solid #ff8500;
            height:38px;
        }
        a{
            display:inline-block;
            padding:0 11px;
            line-height:38px;
            text-decoration:none;
            color:#000;
        }
        a:hover{
            color:#ff8500;
            background:#eee;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#">登录</a>
        <a href="#">微博啊</a>
        <a href="#">博客系统</a>
        <a href="#">邮箱</a>
    </div>
</body>
</html>

搜索框

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        input{
            height:32px;
            width:282px;
            line-height:32px;
            background:url(1.jpg) right no-repeat;
        }
    </style>
</head>
<body>
    <input type="text" value="请输入关键字" />
</body>
</html>

五彩导航

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        a{
            display:inline-block;
            width:120px;
            height:58px;
            text-decoration:none;
            line-height:50px;
            text-align:center;
            color:#fff;
        }
        .one{
            background:url(image/bg1.png);
        }
        .two{
            background:url(image/bg2.png);
        }
        .three{
            background:url(image/bg3.png);
        }
        .four{
            background:url(image/bg4.png);
        }
        .five{
            background:url(image/bg5.png);
        }
        .one:hover{
            background:url(image/bg6.png);
        }
        .two:hover{
            background:url(image/bg7.png);
        }
    </style>
</head>
<body>
    <a href="#" class="one">五彩导航</a>
    <a href="#" class="two">五彩导航</a>
    <a href="#" class="three">五彩导航</a>
    <a href="#" class="four">五彩导航</a>
    <a href="#" class="five">五彩导航</a>
</body>
</html>

css入门：day4—背景-优先级-显示模式

通配选择器

伪类选择器

伪对象选择器

相邻元素选择器

属性选择器

行高属性

背景属性

a： 背景颜色

b： 背景图片

c： 设置背景图片是否平铺

d： 设置背景图片位置

e： 设置背景图片大小

f： 综合使用

g： 设置背景是否受滚动条的影响

h： 背景颜色渐变

①线性渐变

写法一：

写法二：

写法三：

写法四：

写法五：

②径向渐变

写法一：

写法二：

写法三：

写法四：

写法五：

③重复线性渐变

④重复径向渐变

列表属性

1.list-style-type

2.list-style-image

内容溢出

网页调试（重点）

css样式的分类

1.内部样式----内联样式

2.行内样式

3.外部样式

样式的继承和覆盖（重点）

样式的优先级（了解）

1.强制优先级（important）

2.选择器优先级

3.伪对象选择器的优先级（了解）

4.样式分类优先级

5.样式叠加（权重）

标签的显示模式（重点）

1.块元素

2.行元素

3.行内的块元素

4.模式转换

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

a：背景颜色

b：背景图片

c：设置背景图片是否平铺

d：设置背景图片位置

e：设置背景图片大小

f：综合使用

g：设置背景是否受滚动条的影响

h：背景颜色渐变