CSS选择器、网页美化（字体、阴影、列表、渐变）

最新推荐文章于 2022-08-18 16:26:18 发布

漂在M=X²+Y²+Z²／n的乐子

最新推荐文章于 2022-08-18 16:26:18 发布

阅读量384

点赞数 1

分类专栏：自学文章标签： css css3 html5 关系选择器

本文链接：https://blog.csdn.net/weixin_45431505/article/details/107844764

版权

自学专栏收录该内容

9 篇文章 0 订阅

订阅专栏

css

如何学习

1.CSS是什么

2.CSS怎么用

3.CSS 选择器

4.美化页面（文字、阴影、超链接、列表、渐变）

推荐网站：菜鸟教程

1.css入门

1.1、什么是CSS

Cascading style sheet 层叠级联样式表

CSS: 表现（美化网页）

字体、颜色、边距、高度、宽度、背景图片、网页定位、页面浮动…

![img](file:///C:\Users\土豆666\AppData\Roaming\Tencent\Users\1036372306\QQ\WinTemp\RichOle`9T045R{GWVQC$Z@F{WHF.png)

1.2、发展史

CSS1.0

CSS2.0 DIV(块)+CSS，HTML与CSS分离思想，网页变得简单，SEO

CSS2.1 浮动和定位

CSS3.0 圆角，阴影，动画。。。。浏览器兼容性~

1.3、快速入门

style

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vT5M0SaM-1596704748024)(C:\Users\土豆666\AppData\Roaming\Typora\typora-user-images\image-20200804142254718.png)]

1.3.1基本入门

CSS的优势

1.内容与表现分离

2.网页结构表现统一，可以复用

3.样式十分的丰富

4.建议使用独立于HTML的css文件

5.容易被搜索引擎收录

1.4、CSS的3种导入方式

样式优先级问题：（就近原则）

行内 > 内部样式！= 外部样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-95ZQHwcb-1596704748026)(C:\Users\土豆666\AppData\Roaming\Typora\typora-user-images\image-20200804144221682.png)]

扩展：外部样式的两种写法

连接式：

导入式：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3jm8k412-1596704748028)(C:\Users\土豆666\AppData\Roaming\Typora\typora-user-images\image-20200804144504129.png)]

@import 是css2.1特有的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    内部样式-->
    <style>
        /*

         */
        h1{
            color: #26ff00;
        }
    </style>
</head>
<body>
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: #D6EDFF" >我是大哥大</h1>
</body>
</html>

2.选择器

作业：选择页面上的某一个或者某一类元素

2.1、基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器
        id必须保证全局唯一！
        不遵循就近原则
        id选择器>class 选择器> 标签选择器
        */
        #le{
            color: #26ff00;
        }
        #zi{
            color: #ce4d52;
        }
        .style1{
            color: #0099cc;
        }
        h1{
          color: #edcf72;
        }
    </style>
</head>
<body>
<h1 id="le">标题1</h1>
<h1 id="zi">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>

1.标签选择器：选择一类标签标签{}

2.类选择器 class :选择所有class 属性一直的标签，跨标签 .类名{}

id 选择器：全局唯一！ #id名{}

优先级： id>class>标签

2.2 层次选择器

1.后代选择器：在某个元素后面：爷爷、爸爸、我、儿子

/*后代选择器*/
body p{
    color: red;
}

2.子选择器

    /*子选择器*/

body>p{
    background: #f89607;
}</style>

3.相邻兄弟选择器

//同辈
    /*相邻兄弟选择器：对下不对上 只有一个*/
    .active + p{
        background: #f608b7;
    }

4.通用选择器

/*通用选择器  x兄弟选择器 当前选中元素的向下的所有兄弟元素  */
   .active~p{
       background: #6024fd;
   }

PS P >P +P ~P

2.3、结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
   /*ul的第一个子元素*/
  ul li:first-child{
      background: #02ff00;
  }

   /*ul的最后一个子元素*/
  ul li:last-child{
      background: red;
  }
  /*只选p1:定位到父元素，选择当前的第一个元素   顺序
     选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效
     */
        p:nth-child(3){
            background: #000;
        }
        /*选中父元素下的第二个类型为p的元素   类型*/
        p:nth-of-type(2){
            background: #f1ba12;
        }
    </style>
</head>
<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li1</li>
    <li>li1</li>
</ul>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-un517V6R-1596704748030)(C:\Users\土豆666\AppData\Roaming\Typora\typora-user-images\image-20200804163031127.png)]

3、美化网页元素

3.1、为什么要美化页面元素

1、有效的传递页面信息

2、美化页面、页面漂亮、才能吸引客户

3.凸显页面内主题

4、提高用户体验

span标签：重点要突出的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体</title>
    <style>
        #title{
            font-size: 50px;
        }
    </style>
</head>
<body>
  我是<span id="title">冲冲冲</span>
</body>
</html>

3.2字体样式

font:字体风格字体大小字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            font-family: 楷体,"Arial Black";
            color: #f8a10c;
        }
        H1{
            font-size: 50px;
        }
        p1{
            font-weight: bold;
        }
    </style>
</head>
<body>
<h1>《航海王》</h1>
<p>是日本漫画家尾田荣一郎作画的少年漫画作品，于1997年7月22日在集英社《周刊少年Jump》
    开始连载。改编的电视动画《航海王》于1999年10月20日起在富士电视台首播。</p>
<p>When I wake up in the morning，

    　　You are all I see;

    　　When I think about you，

    　　And how happy you make me。

    　　You're everything I wanted;

    　　You're everything I need;

    　　I look at you and know;

    　　That you are all to me。

    　　Barry Fitzpatrick</p>
</body>
</html>

3.3、文本样式

1.颜色 color rgb rgba

2.文本对齐方式 text-align=center

3.首行缩进 text-indent:2em;

4.行高 line-height: 单行文字上下居中

5.装饰 text-decoration:

6.文本图片水平对齐： vertical-align:middle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img,span{
            vertical-align: middle;
        }
        
    </style>
</head>
<body>
  <p>
      <img src="css/a.png" alt="">aaasaa
  </p>
</body>
</html>

3.4阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>冲冲冲</title>
    <style>
        a{
            text-decoration: none;
            color: #000000;
        }
        /*鼠标悬浮的状态,常用*/
        a:hover{
            color: #26ff00;
            font-size: 40px;
        }
        /*鼠标按住未释放状态*/
        a:active{
            color: #f8a10c;
        }
        /*text-shadow: red 10px 10px 10px ; 阴影颜色，水平偏移，垂直偏移*/
        #grice{
            text-shadow: red 10px 0px 5px ;
        }
    </style>
</head>
<body>
<a href="#">
    <img src="image/b.png" alt="">
</a>
<p>
    <a href="#">pathon</a>
</p>
<p>
    <a href="">作者：海外作者</a>
</p>
<p id="grice">
    99$
</p>
</body>
</html>

3.5、超链接伪类

正常情况下 a, a:hover

a{
    text-decoration: none;
    color: #000000;
}
/*鼠标悬浮的状态,常用*/
a:hover{
    color: #26ff00;
    font-size: 40px;
}

3.6列表

#nav{
    width: 260px;
}



.title{
    font-size: 18px;
    font-weight: bold;
    line-height: 35px;
    text-indent: 1em;
    background: red;
}
/*ul li*/
    /*list-style： none*/
    /*circle 空心圆*/
    /*decimal 数字*/
    /*square 正方形*/
ul{
    background: greenyellow;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: #2b2b2b;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>

<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li><a href="#">图片</a>&nbsp;&nbsp;<a href="#">音响</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a>&nbsp;&nbsp;</li>
        <li><a href="#">图片</a>&nbsp;&nbsp;<a href="#">音响</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">图片</a>&nbsp;&nbsp;<a href="#">音响</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
    </ul></div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f2Qpe5Mt-1596704748032)(C:\Users\土豆666\AppData\Roaming\Typora\typora-user-images\image-20200806152256482.png)]

3.7、背景

背景颜色

背景图片

<style>
    div{
        width: 1000px;
        height: 700px;
        border:1px solid red;
        /*默认是全部平铺的*/
        background-image: url("css/image/7.jpg");
    }
    .div1{
        background-repeat: repeat-x;
    }
    .div2{
        background-repeat: repeat-y;
    }
    .div3{
        background-repeat: no-repeat;
    }
</style>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vbRJR7RZ-1596704748033)(C:\Users\土豆666\AppData\Roaming\Typora\typora-user-images\image-20200806155826241.png)]

对图片进行铺平和微调

#nav{
    width: 260px;
}



.title{
    font-size: 18px;
    font-weight: bold;
    line-height: 35px;
    text-indent: 1em;
    /* 颜色、图片、图片位置、平铺方式*/
    background: red url("image/1.png") 176px 3px no-repeat;

}
/*ul li*/
    /*list-style： none*/
    /*circle 空心圆*/
    /*decimal 数字*/
    /*square 正方形*/
ul{
    background: greenyellow;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background-image: url("image/4.png");
    background-repeat: no-repeat;
    background-position: 178px 2px;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: #2b2b2b;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

3.8、渐变（grabient）

https://www.grabient.com/ 渐变获取网址

background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);

漂在M=X²+Y²+Z²／n的乐子

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器、网页美化（字体、阴影、列表、渐变）

css如何学习1.CSS是什么2.CSS怎么用3.CSS 选择器4.美化页面（文字、阴影、超链接、列表、渐变）5.盒子模型6.浮动7.定位8.网页动画（特效效果）推荐网站：菜鸟教程1.css入门1.1、什么是CSSCascading style sheet 层叠级联样式表CSS: 表现（美化网页）字体、颜色、边距、高度、宽度、背景图片、网页定位、页面浮动…![img](file:///C:\Users\土豆666\AppData\Roaming\Tencent\Users\1
复制链接

扫一扫

专栏目录