前端基础 Day03

CSS(1)

 

1. 什么是CSS

一、 如何学习：

  1. CSS是什么

  2. CSS怎么用（快速入门）

  3. CSS选择器（重点+难点）

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

  5. 盒子模型

  6. 浮动

  7. 定位

  8. 网页动画（特效）

https://www.runoob.com/ 菜鸟教程

二、 是什么

Cascading Style sheet 层叠级联样式表

CSS：表现（美化网页）

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

三、 发展史：

CSS1.0

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

CSS2.1 浮动，定位

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

四、 快速入门

style

练习格式：

基本入门：

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6  ​
 7      <!--规范，<style>可以编写css的代码，每一个声明，最好使用分号结尾
 8      语法：
 9          选择器{
10              声明1;
11              声明2;
12              声明3;
13          }
14      -->
15      <style>
16          h1{
17              color: blue;
18          }
19      </style>
20  </head>
21  <body>
22  ​
23      <h1>我是标题</h1>
24  </body>
25  </html>

外部引用（建议使用）

五、 CSS的优势

  1. 内容和表现分离

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

  3. 样式十分丰富

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

  5. 利于SEO，容易被搜索引擎收录！

六、 CSS的3种导入方式

内部、外部、行内

优先级：就近原则

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6  ​
 7      <style>
 8      <!--内部样式-->
 9          h1{
10              color: green;
11          }
12      </style>
13      <!--外部样式-->
14      <link rel="stylesheet" href="css/style.css">
15  </head>
16  <body>
17      <!--行内样式：在标签元素种，编写一个style属性，编写样式即可-->
18      <h1 style="color:red;">我是标题</h1>
19  ​
20  </body>
21  </html>

扩展：外部样式两种写法

链接式：html

 <link rel="stylesheet" href="css/style.css">

导入式：css2.1   是特有的

 <style>
     @import "css/style.css";
 </style>

 

2. 选择器（一、四重要）

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

一、 基本选择器**

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

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6  ​
 7      <style>
 8          /*标签选择器会选择页面上所有的标签*/
 9          h1{
10              color: #1ea36e;
11              background: #e2b192;
12              border-radius:24px;
13          }
14          p{
15              font-size: 80px;
16          }
17      </style>
18  </head>
19  <body>
20  <h1>好好学Java</h1>
21  <h1>好好学Java</h1>
22  <p>刚把爹哦</p>
23  </body>
24  </html>

 

  1. 类选择器 .class的名称{}         选择所有class一致的标签，跨标签

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6  ​
 7      <style>
 8          /*类选择器的格式   .class的名称{}
 9          好处，可以多个标签归类，是同一个class
10          */
11          .haha{
12              color: #f6dcff;
13          }
14          .hahaha{
15              color: #edffae;
16          }
17      </style>
18  </head>
19  <body>
20  ​
21  <h1 class="haha">标题1</h1>
22  <h1 class="hahaha">标题2</h1>
23  <h1>标题3</h1>
24  ​
25  <p class="haha">p标签</p>
26  </body>
27  </html>

 

  1. ID选择器 #id名称{}       唯一

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6  ​
 7      <style>
 8          /*id选择器  :id必须保证全局唯一！！！
 9          #id名称{}
10          */
11          #haha{
12              color: red;
13          }
14          .style1{
15              color: #4ccfff;
16          }
17          h1{
18              color: green;
19          }
20      </style>
21  </head>
22  <body>
23  ​
24  <h1 id="haha" class="style1">标题1</h1>
25  <h1 class="style1">标题2</h1>
26  <h1 class="style1">标题3</h1>
27  <h1>标题4</h1>
28  <h1>标题5</h1>
29  ​
30  </body>
31  </html>

 

优先级：不遵循就近原则，固定的

id> class > 标签选择器

二、 层次选择器 （定位的时候比较方便）

 1  <p>p1</p>
 2  <p>p2</p>
 3  <p>p3</p>
 4  <ul>
 5      <li>
 6          <p>p4</p>
 7      </li>
 8      <li>
 9          <p>p5</p>
10      </li>
11      <li>
12          <p>p6</p>
13      </li>
14  </ul>

  1. 后代选择器：在某个元素的后面 祖爷爷 爷爷 爸爸 你

 /*后代选择器*/
 body p{
     background: green;
 }

  1. 子选择器 一代 儿子

 body>p{
     background: aquamarine;
 }

  1. 相邻兄弟选择器 同辈（向下）

 .active +p{
     background: #ff8cec;
 }
 1  <p class="active">p1</p>
 2  <p>p2</p>
 3  <p>p3</p>
 4  <ul>
 5      <li>
 6          <p>p4</p>
 7      </li>
 8      <li>
 9          <p>p5</p>
10      </li>
11      <li>
12          <p>p6</p>
13      </li>
14  </ul>
15  <p class="active">p7</p>
16  <p>p8</p>

  1. 通用兄弟选择器 当前选中元素向下所有兄弟元素

 .active~p{
     background: blueviolet;
 }

代码同上

三、结构伪类选择器

结构： 定位元素 主要记住1、2 ，第4个比第3个要好用

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6      <!--避免使用class选择器-->
 7      <style>
 8  ​
 9          /*ul的第一个元素*/
10          ul li:first-child{
11              background: aquamarine;
12          }
13  ​
14          /*ul的最后一个元素*/
15          ul li:last-child{
16              background: red;
17          }
18          /*选中p1:定位到父元素，选择当前的第一个元素
19          选中当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！
20          */
21          p:nth-child(2){
22              background: bisque;
23          }
24          /*选中父元素，下的p元素的第二个，类型*/
25          p:nth-of-type(2){
26              background: yellow;
27          }
28      </style>
29  </head>
30  <body>
31  <h1>h1</h1>
32  <p>p1</p>
33  <p>p2</p>
34  <p>p3</p>
35  <ul>
36      <li>li1</li>
37      <li>li2</li>
38      <li>li3</li>
39  </ul>
40  </body>
41  </html>

伪类： hover 鼠标悬停

1     </style>
2          a:hover{
3              background: green;
4          }
5      </style>
6  </head>
7  <body>
8  <a href="">123321</a>

四、属性选择器（常用） 好用！把id和class结合了

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6  ​
 7      <style>
 8          .demo a{
 9              float: left;
10              display: block;
11              height: 50px;
12              width: 50px;
13              border-radius: 10px;
14              background: aqua;
15              text-align: center;
16              color: coral;
17              text-decoration: none;
18              margin-right: 5px;
19              font: bold 20px Arial;
20              line-height: 50px;
21          }
22      </style>
23  </head>
24  <body>
25  ​
26  <p class="demo">
27      <a href="http://www.baidu.com/" class="links item first" id="first">1</a>
28      <a href="http://www.baidu.com/" class="links item active" target="_blank" title="test">2</a>
29      <a href="images/123.html" class="links item active">3</a>
30      <a href="images/123.png" class="links item">4</a>
31      <a href="images/123.jpg" class="links item">5</a>
32      <a href=abc"">6</a>
33      <a href="/a.pdf">7</a>
34      <a href="/abc.pdf">8</a>
35      <a href="/abc.doc">8</a>
36      <a href="/abcd.doc" class="links item last">8</a>
37  ​
38  </p>
39  </body>
40  </html>

属性选择器格式：

 1  /*属性名，  属性名=属性值（正则）
 2  =   绝对等于
 3  *=  包含  
 4  ^=  以这个开头
 5  $=  以这个结尾
 6  */
 7  /*存在id属性的元素    a[]{}  */
 8  a[id]{
 9      background: yellow;
10  }
11  a[id=first]{
12      background: beige;
13  }

 /*class中有links的元素*/
 a[class*="links"]{
     background: yellow;
 }

 /*选中href中以http开头的元素*/
 a[href^=http]{
     background:yellowgreen;
 }

 a[href$=pdf]{
     background: crimson;
 }

 

posted @ 2021-03-17 11:32  825728422  阅读(69)  评论(0)    收藏  举报