前端(2) - CSS

gltou

初识及入门

css概念

  • Cascading Style Sheet 层叠级联样式表，用来控制网页的样式，美化网页
  • html：做网页的布局（结构）—结构层
  • css：控制显示的样式（美观）—行为层
  • js：控制网页的行为（与用户交互）—交互层

CSS在网页中的应用

在网页中，主要有以下应用：字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动

CSS的发展史

CSS1.0

CSS2.0：DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO

CSS2.1：浮动、定位

CSS3.0：圆角、阴影、动画....浏览器兼容性

CSS的优势

  • 内容和表现分离
  • 网页结构表现统一，可以实现复用
  • 样式十分丰富
  • 建议使用独立于HTML的css文件
  • 利用SEO，容易被搜索引擎收录

 

css基本语法

语法： 选择器{声明} 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范，<style>可以编写css的代码，每一个声明，使用分号结尾
    语法：
        选择器{
            声明1；
            声明2；
            声明3
        }
    -->
    
    <style>
        h1{
            color: red;
        }
    </style>


</head>
<body>
<h1>一级标题</h1>
</body>
</html>

 

3种引入的方式

行内样式

行内样式：在标签元素中，编写一个style属性，编写样式皆可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--行内样式：在标签元素中，编写一个style属性，编写样式皆可-->
<h1 style="color: red">一级标题</h1>

</body>
</html>

内部样式

在head中的style标签中，编写样式即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--  内部样式  -->
    <style>
        h1{
            color: green;
        }
    </style>
</head>
<body>
<h1 >一级标题</h1>

</body>
</html>

外部样式

在head中，通过link标签指向css文件，使样式生效

 

css规律

就近原则！！！

当同一个标签存在多个样式时，哪个离这个标签近就用哪个，图示优先级为：行内样式>外部样式>内部样式

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

  • 链接式：

　　　html

<!-- 外部样式  -->
<link rel="stylesheet" href="style.css">
View Code
  • 导入式：

　　   CSS2.1

<!-- 外部样式  -->
<style>
    @import url("style.css");
</style>
View Code

首页link和import语法结构不同，前者<link>是html标签，只能放入html源代码中使用，后者可看作为css样式，作用是引入css样式功能。import在html使用时候需要<style type="text/css">标签，同时可以直接“@import url(CSS文件路径地址);”放如css文件或css代码里引入其它css文件。

本质上两者使用选择区别不大，但为了软件中编辑布局网页html代码，一般使用link较多，也推荐使用link

 

css的选择器（重点！！！）

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

基本选择器

  • 标签：会选择页面上所有的这个标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*标签选择器，会选择页面上所有的这个标签*/
        h1{
            color: #f69e80;
        }
        p{
            color: #53f69d;
        }
    </style>
</head>
<body>

<h1>学Java</h1>
<p>记笔记</p>
</body>
</html>
  • id：格式 #id名称{} ；全局唯一
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* id选择器
        格式：#id名称{}
        */
        #q{
            color: #f69e80;
        }
        #w{
            color: #f69e80;
        }
        #e{
            color: #f69e80;
        }
    </style>
</head>
<body>

<h1 id="q">标题1</h1>
<h1 id="w">标题2</h1>
<h1 id="e">标题3</h1>

</body>
</html
  • class：格式.class名称{} ；选择所有class属性一致的标签，跨标签；好处：可以多个标签归到一个class里面，实现复用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*class选择器格式：.class名称{}
        好处，可以多个标签归类，是同一个class，可以复用
        */
        .q{
            color: #53f69d;
        }
        .w{
            color: #f69e80;
        }
    </style>
</head>
<body>

<h1 class="q">标题1</h1>
<h1 class="w">标题2</h1>
<h1 class="q">标题3</h1>
</body>
</html>

思考：当同一个标签同时存在class、id、标签会执行哪一个？

答案：id>class>标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* id选择器
        格式：#id名称{}
        */
        #q{
            color: #f69e80;
        }
        .yanse{
            color: #53f69d;
        }
        h1{
            color: red;
        }

    </style>
</head>
<body>

<h1 id="q" class="yanse">标题1</h1>

</body>
</html>

高级选择器

  • 层次选择器
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <style>
 8         /*后代选择器*/
 9         /*
10         body p{
11             background: red;
12         }
13         */
14         /*子代选择器*/
15         /*
16         body>p{
17             background: #3cbda6;
18         }*/
19 
20         /*相邻弟弟选择器：只有一个，相邻（向下）*/
21         /*
22         .active + p{
23             background: #53f69d;
24         }
25          */
26 
27         /*通用兄弟选择器：当前选中元素的向下所有兄弟元素*/
28         .active ~ p{
29             background: #53f69d;
30         }
31     </style>
32 </head>
33 <body>
34 
35 <p>p1</p>
36 <p class="active">p0</p>
37 <p>p2</p>
38 <p>p3</p>
39 <ul>
40     <li>
41         <p>p4</p>
42     </li>
43     <li>
44         <p>p5</p>
45     </li>
46     <li>
47         <p>p6</p>
48     </li>
49 </ul>
50 </body>
51 </html>
    • 后代选择器（空格）：某个元素的后面；逻辑关系类型~祖爷爷-->爷爷-->爸爸-->you；逻辑关系里面p标签包括p标签的子标签、子子标签均生效 
      /*后代选择器*/
body p{
       background: red;
}
      View Code
    • 子选择器（>）：只有一代~只有儿子；只有子选择器p标签生效，p标签里面的子标签、子子标签不生效 
      /*子代选择器*/
body>p{
      background: #3cbda6;
}
      View Code
    • 相邻弟弟选择器(+)：同辈；示例代码active相邻的下面的p标签生效，相邻只管向下的，不管向上的，上面的p标签不生效 
      /*相邻弟弟选择器：只有一个，相邻（向下）*/
.active + p{
       background: #53f69d;
}
      View Code
    • 通用兄弟选择器(~)：当前选中元素的向下的所有同级兄弟元素生效 
      /*通用兄弟选择器：当前选中元素的向下所有兄弟元素*/
.active ~ p{
       background: #53f69d;
}
      View Code
  • 结构伪类选择器
 1  /*ul的第一个子元素*/
 2  ul li:first-child{
 3      background: #53f69d;
 4  }
 5  /*ul的最后一个子元素*/
 6  ul li:last-child{
 7      background: #f69e80;
 8  }
 9  /*选择p1 ：定位到父元素，选择当前第一个元素
10  选择当前p元素的父级元素，选中父级元素中的第一个，并且是当前元素才生效！按照顺序去取
11  */
12  p:nth-child(2){
13      background: aliceblue;
14  }
15  /*选中父元素下的p元素的第二个，按照类型去取*/
16  p:nth-of-type(2){
17      background: aqua;
18  }

  • 属性选择器（重点！！！）
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <style>
 8         /*格式：标签名[属性值=属性值(支持正则匹配)]
 9           注意：= 绝对等于  *=包含这个元素  ^=以什么开头  $=以什么结尾
10         */
11 
12         /*1.存在id属性的元素*/
13         li[id]{
14             background: green;
15         }
16         /*2.等于具体属性值的元素*/
17         li[id="first"]{
18             background: yellow;
19         }
20         /*3.包含属性值的元素*/
21         li[class*="links"]{
22             background: black;
23         }
24 
25         /*4.属性值使用正则匹配，例如href元素以http开头的元素*/
26         li[href^=http]{
27             background: red;
28         }
29         /*5.属性值使用正则匹配，例如href元素以pdf结尾的元素*/
30         li[href$=pdf]{
31             background: blue;
32         }
33 
34 
35     </style>
36 </head>
37 <body>
38 
39 <ul>
40     <li id="first" >li1</li>
41     <li class="none links">li2</li>
42     <li id="second">li3</li>
43     <li class="links active">li4</li>
44     <li id="third">li5</li>
45     <li href="http://www.baidu.com">li6</li>
46     <li href="http://www.blibli.com">li7</li>
47     <li href="http://pdf">li8</li>
48     <li href="http://www.pdf">li9</li>
49 </ul>
50 </body>
51 </html>

 

美化网页

为什么要美化网页

  • 有效的传递页面信息
  • 美化网页，页面漂亮，才能吸引用户
  • 凸显页面的主题
  • 提高用户的体验

span标签：重点要突出的字，使用span套起来；行业默认的规则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #title{
            font-size: 50px;
        }
    </style>
</head>
<body>

学习<span id="title">Java</span>
</body>
</html>

字体

  • font-family：字体样式
  • font-size：字体大小
  • font-weight：字体粗细
  • color：颜色
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <style>
 8         body{
 9             font-family: 楷体;
10             color: #a13d30;
11         }
12         h1{
13             font-size: 50px;
14         }
15         .p1{
16             font-weight: bolder;
17         }
18     </style>
19 </head>
20 <body>
21 <h1>出师表</h1>
22 <p class="p1">先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p>
23 <p>宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。</p>
24 <p>侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。</p>
25 <p>将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。</p>
26 <p>亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。</p>
27 <p>臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。</p>
28 <p>先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明，故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。</p>
29 <p>愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言。深追先帝遗诏，臣不胜受恩感激。</p>
30 <p>今当远离，临表涕零，不知所言。</p>
31 </body>
32 </html>

排版网页

  • text-align：位置排版
  • text-indent：首行缩进
  • line-height：行高，行高和块的高度一致，就可以上下居中
  • text-decoration：上中下划线
  • vertical-align：middle文本图片水平对齐
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body{
            font-family: 楷体;
            color: #a13d30;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bolder;
        }
    </style>

    <style>
        h1{
            text-align: center;
        }
        p{
            text-indent: 2em;
            line-height: 2;
            text-decoration: underline;
        }
    </style>
</head>
<body>
<h1>出师表</h1>
<p class="p1">先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p>
<p>宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。</p>
<p>侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。</p>
<p>将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。</p>
<p>亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。</p>
<p>臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。</p>
<p>先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明，故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。</p>
<p>愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言。深追先帝遗诏，臣不胜受恩感激。</p>
<p>今当远离，临表涕零，不知所言。</p>
</body>
</html>

超链接伪类

hover

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         /*默认颜色*/
 8         a{
 9             color: black;
10         }
11         
12         /*鼠标悬停的状态*/
13         a:hover{
14             color: green;
15             font-size: 50px;
16         }
17     </style>
18 </head>
19 <body>
20 <a href="http://www.baidu.com">百度</a>
21 </body>
22 </html>

列表样式

list-style：

  • none：去掉圆点
  • circle：空心圆
  • decimal：数字
  • square：正方形
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <style>
 8         .p1{
 9             list-style: none;
10         }
11         .p2{
12             list-style: circle;
13         }
14         .p3{
15             list-style: decimal;
16         }
17         .p4{
18             list-style: square;
19         }
20     </style>
21 </head>
22 <body>
23 
24 <ul>
25     <li class="p1">li1</li>
26     <li class="p2">li2</li>
27     <li class="p3">li3</li>
28     <li class="p4">li4</li>
29 </ul>
30 </body>
31 </html>

背景样式

背景颜色

background，前面的例子都有，测试人员了解上述的就够了

背景图片

background-repeat:作用相当于windows设置壁纸时寻找的契合度一样

  • 默认全部平铺
  • repeat-x:水平平铺
  • repeat-y：竖向平铺
  • no-repeat：不平铺
  • ......

渐变背景参考网址：http://www.grabient.com

 

盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

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

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

不同部分的说明：

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。

边框border

border表示盒子的边界，它可以设置成可见的，样式多样的。最基本的，border像margin和padding一样可以分别对每一条边进行设置，也可以使用简写属性border进行设置。

当border属性的色值不明确指定时，如border: 1px solid，边框颜色与当前元素的字体颜色color相同。

  • border-top：上边界
  • border-bottom：下边界
  • border-left：左边界
  • border-right：右边界
/*使用简写属性，同时设置四条边界，四条边界的宽度、样式和颜色都是一样的*/
border: 2px solid green;
/*下面的样式与上面的样式等价*/
border-top: 2px solid green;
border-bottom: 2px solid green;
border-left: 2px solid green;
border-right: 2px solid green;

内边框padding

padding表示盒子的内边距（填充）。与外边距不同，padding不是只能完全透明的，可以设置背景颜色和图片。与margin类似，padding包含了上下左右四条边，可以单独设置每一条边的边距。

  • padding-top：上部填充
  • padding-bottom：下部填充
  • padding-left：左部填充
  • padding-right：右部填充

外边框margin

margin，盒子的外边框，他是完全透明的，开发者只可以设置它的边距。margin包含了上下左右四条边，开发者可以单独设置每一条边的边距。

  • margin-top：上边距
  • margin-buttom：下边距
  • margin-left：左边距
  • margin-right：右边距
/*margin属性后只跟一个值，同时设置四条边的边距相等*/
margin: 10px;
/*下面样式与上面的样式等价*/
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;

 备注：该篇笔记后续还会补充，盒子还不全；还有浮动、定位两个大模块未补充

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode