HTML-2

1.CSS简介

　　CSS的主要使用场景就是美化网页，布局页面的

  • HTML的局限性

　　　　HTML只关心内容的语义，主要做结构，显示元素内容

  • CSS

　　　　CSS是层叠样式表（Cascading Style Sheets）的简称，有时我们也会称之为CSS样式表或级联样式表。

　　　　CSS也是一种标记语言，其主要作用就是设置HTML页面中的文本内容、图片的外形以及版面的布局和外观显示样式

　　　　最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构（HTML）与样式（CSS）相分离

2.CSS语法规范

  • CSS由两个部分组成：选择器以及一条或多条声明
    • 选择器用于指定CSS样式的HTML标签
    • 属性和属性值以键值对的形式出现
    • 属性是对指定的对象设置样式属性，例如字体大小、文本颜色等
    • 属性与属性值之间以:分割，属性与属性之间以;分割
  • CSS代码风格
    • 样式格式书写
      • 紧凑格式：写在一行
      • 展开格式：写在多行
    • 样式大小写
      • 推荐样式选择器、属性名、属性值全部使用小写字母
    • 空格规范
      • 在属性值前面，冒号后面，保留一个空格
      • 选择器（标签）和大括号中间保留一个空格

3.CSS基础选择器

  • CSS选择器的作用

　　　选择器根据不同需求把不同的标签选择出来，简单来说，就是选择标签

  • 选择器
    • 基础选择器：是由单个选择器组成的
      • 包括：标签选择器、类选择器、id选择器和通配符选择器
      • 标签选择器：用HTML标签名称作为选择器
      • 类选择器：结构需要class属性来调用，长名称或词组可以使用-来命名，不要使用纯数字或者中文命名
        • 多类名：可以给一个标签赋值多个类名，不同的类名之间要以空格分开
      • id选择器：样式#定义，结构id调用，只能调用一次，他人切勿使用
        • 类选择器好比人的名字，一个人可以有多个名字，一个名字也可以被多个人使用
        • id选择器不得重复，最大不同在使用次数上
        • id选择器一般用于页面上的唯一性元素，而类选择器一般用于修改样式
      • 通配符选择器：通配符选择器使用*定义，它表示选取页面中的所有标签（元素）
        • 通配符选择器不需要调用，自动就给所有的元素使用样式
        • 特殊情况下才使用
基础选择器 作用 特点 使用情况 用法
标签选择器 可以选出所有相同的标签 不能差异化选择 较多 p {color: red}
类选择器 可以选择1个或者多个标签 可以根据需求选择 非常多 .nav {color: red}
id选择器 一次只能选择一个标签 ID属性只能在每个HTML文档中出现一次 一般和js搭配 #nav {color: red}
通配符选择器 选择所有的标签 选择的太多，有部分不需要 特殊情况使用 *{color: red}
  • 复合选择器：

4.CSS字体属性

　　CSS Fonts（字体）属性用于定义字体系列、大小、粗细和文字样式（如斜体）

  • CSS通过font-family属性定义文本的字体系列
    • 当定义了多个字体时，系统首选第一个字体，在发现浏览器不兼容的情况下，会进行顺位移动
  • CSS使用font-size属性定义字体的大小
    • px（像素）大小是我们网页最常用的单位
    • 谷歌浏览器默认的字体大小为16px
    • 不同浏览器可能弄人显示的字号大小不一致，我们尽量给一个明确大小
    • 可以给body指定整个页面文字大小
    • 标题标签比较特殊，需要单独指定文字大小
  • CSS使用font-weight属性设置文本字体的粗细
    • normal：正常的字体，相当于number为400
    • bold：粗体，相当于number为700
    • bolder：特粗体
    • lighter：细体
    • number：100|200|300|400|500|600|700|800|900，注意number后面不要带单位，实际开发时我们更喜欢使用number
  • CSS使用font-style属性设置文本的风格
    • normal：默认值，浏览器会显示标准的字体样式font-style:normal;
    • italic：浏览器会显示斜体样式
    • 我们很少给文字加斜体，一般是将斜体标签（em，i）改为不斜体字体
  • 字体复合属性
    • font: font-style font-weight font-size/line-height font-family;
    • 不需要的设置可以省略，但是必须要保留font-size和font-family属性

5.CSS文本属性

　　CSS Text（文本）属性可定义文本的外观

  • color属性可以定义文本的颜色
    • 预定义的颜色值：red、green、blue
    • 十六进制：#000000
    • RGB代码：rgb(255,0,0)
  • text-align：属性用于设置元素内文本内容的水平对其方式
    • left：左对齐
    • right：右对齐
    • center：居中对齐
  • text-decoration：属性规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线等
    • none：默认，没有装饰线（最常用）
    • underline：下划线，链接a自带下划线（常用）
    • overline：上划线（几乎不用）
    • line-through：删除线（不常用）
  • text-indent：属性用来指定文本第一行的缩减，通常是将段落的首行缩进
    • em是一个相对单位，就是当前元素1个文字的大小，如果当期那元素没有设置大小，就会按照父元素1个文字的大小
  • line-height：属性用于设置行间的距离（行高），可以控制文字行与行之间的距离
    • 行间距包含上间距+文本高度+下间距

6.CSS引入方式

  • 行内样式表（行内式）：是在元素标签内部的style属性中设定CSS样式，适用于修改简单的样式，只能够控制当前标签的样式
  • 内部样式表（嵌入式）：一般我们会将<style>标签放在文档的<head>头部，此种方式可以方便控制整个页面中的元素样式设置
  • 外部样式表（链接式）：将演示单独写到CSS文件中，之后再把CSS文件引到HTML页面中，使用link标签将css文件引入
    • <link rel = 'stylesheet' href = 'css文件路径'>
  • 综合案例

　　　　想要图片居中对齐，必须要让它的父亲居中对齐

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <style type="text/css">
 7             h2 {
 8                 text-align: center;
 9             }
10             .info {
11                 color: gray;
12                 font-size: 10px;
13             }
14              .orgin {
15                  font-size: 14px;
16                  text-decoration: none;
17              }
18              .slogan{
19                  text-indent: 2rem;
20                  line-height: 24px;
21              }
22              .cent{
23                  text-align: center;
24              }
25         </style>
26     </head>
27     <body>
28         <h2>
29             北方高温明日达鼎盛，京津冀多地表温度将超60℃
30         </h2>
31         <div class="info cent">
32             2022年3月24日 11:53:25 来源:
33             <a href="javascript:;" class="orgin">中国天气网&nbsp;&nbsp;&nbsp;&nbsp;</a>
34             <input type="text" placeholder="请输入查询条件" />
35             <input type="button" value="搜索" />
36         </div>
37         <hr />
38         <div class="slogan">
39             中国天气网讯 今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。
40             预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，
41             预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。
42         </div>
43         <h4>气温41.4℃！地表温度66.5℃！北京强势迎七月首个高温日</h4>
44         <p class="slogan">
45             今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、
46             河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。
47         </p>
48         <div class="cent">
49             <img src="img/f31fbe096b63f624afcf7dac87ebf9fd184ca3c7.jpeg" />
50         </div>
51         <p class="slogan">
52             在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，
53             部分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。
54         </p>
55         <h4>明日热度再升级！京津冀携手冲击38℃+</h4>
56         <p class="slogan">
57             中国天气网气象分析师王伟跃介绍，明天（4日），华北、黄淮地区35℃以上的高温天气还将继续升级，
58             并进入鼎盛阶段，高温强度和范围都将发展到最强。明天，北京南部、天津大部、河北中部和南部、
59             山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。
60         </p>
61         <p class="slogan">
62             不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温还会天天上岗。
63             在此提醒当地居民注意防暑降温，防范持续高温带来的各种不利影响。（文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽）
64         </p>
65         <div class="info">图文来源：中国天气网 责任编辑 刘京-NO5631</div>
66     </body>
67 </html>

5.CSS第二天

  • Emmet语法快速生成标签：使用缩写，来提高html/CSS编写速度（注意：符号之间不要加空格）
    • 生成标签，输入标签名加tab键
    • 生成多个相同的标签，加上*
    • 如果有父子级关系的标签，可以用>
    • 如果有兄弟关系的标签，用+
    • 如果生成带有类名或者id名字的，直接写.class或者#id就可以
    • 如果生成的div类名是有顺序的，可以用自增符号$：.demo*5，默认从1开始排序
    • 如果想要在生成的标签内部写内容可以用{}表示
  • Emmet语法快速生成CSS样式
    • CSS基本采取简写形式即可
  • 快速格式化代码
    • 快捷键：ctrl+K
  • CSS复合选择器

　　　　在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

    • 后代选择器：最终选择的孩子的样式，注意：孩子可以儿子也可以是孙子，只要是元素1的后代即可

　　　　　　后代选择器又称包含选择器，可以选择父元素里面的子元素，将外层标签写在外面，内层标签写在里面，中间用空格分隔

    • 子选择器：元素1>元素2{样式声明}

　　　　　　只能选择作为某元素最近一级的子元素，简单理解就是亲儿子元素

    • 并集选择器：使用,进行分割

　　　　　　并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             div,
 8             p,
 9             .pig>li {
10                 color: lightpink;
11             }
12             /* 约定的语法规范：我们并集选择器喜欢竖着写，最后一个选择器不需要加,*/
13         </style>
14     </head>
15     <body>
16         <div>熊大</div>
17         <p>熊二</p>
18         <span>光头强</span>
19         <ul class="pig">
20             <li>小猪佩奇</li>
21             <li>猪爸爸</li>
22             <li>猪妈妈</li>
23         </ul>
24     </body>
25 </html>
    • 伪类选择器：最大的特点是使用冒号（:）表示

　　　　　　伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊的效果，或选择第1个，第n个元素

      • 链接伪类选择器，注意：a:hover必须要放在a:link和a:visited后起作用，a:active必须要放在a:hover后，按照顺序执行LVHA 
a:link 选择所有未被访问链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接（鼠标按下未弹起的链接）
      • focus伪类选择器：用于获取获得焦点的表单元素，焦点是光标，一般是<input>类表单才能获取
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             input:focus {
 8                 background-color: lightpink;
 9             }
10         </style>
11     </head>
12     <body>
13         <input />
14         <input />
15         <input />
16     </body>
17 </html>
  • CSS的元素显示模式

　　　　元素的显示模式：元素（标签）以什么样的方式进行显示

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

    • 块元素：<h1>~<h6>、<P>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素
      • 比较霸道，自己独占一行
      • 高度、宽度、外边距以及内边距都可以控制
      • 宽度默认是容器（父级宽度）的100%
      • 是一个容器及盒子，里面可以放行内或者块级元素
      • 注意：文字类的元素里面不能使用块级元素，<p>标签主要用于存放文字，因此<p>里面不能存放块级元素，<h1>~<h6>同理
    • 行内元素<a>、<strong>、<b>、<em>、<span>等，其中<span>标签是最典型的行内元素，有的地方称之为内联元素
      • 相邻的行内元素在一行上，一行可以显示多个
      • 高、宽直接设置是无效的
      • 默认宽度就是它本身内容的宽度
      • 行内元素只能容纳文本或其他行内元素    
      • 注意：链接里面不能再放链接，特殊情况下<a>里面可以放块级元素，但是给<a>转换以下块级模式更安全
    • 行内块元素：<img />、<input />、<td>，它们同时具有块元素和行内元素的特点，有些资料称它们为行内块元素
      • 和相邻的行内（行内块）元素在一行上，但是它们之间会有空白缝隙，一行可以显示多个
      • 默认宽度就是它本身内容的宽度（行内元素的特点）
      • 高度、行高、外边距以及内边距都可以控制（块级元素的特点）
    • 显示模式的转换
      • 转换为块元素：display:block
      • 转换为行内元素：display:inline
      • 转换为行内块元素：display:inline-block
  • 小米侧边栏案例
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script src="js/jquery-3.6.0.js"></script>
 7         <script>
 8             $(function(){
 9                 
10             })
11         </script>
12         <style type="text/css">
13             * {
14                 padding: 0;
15                 margin: 0;
16             }
17             .nav{
18                 list-style: none;
19                 background-color: #535758;
20                 width: 225px;
21                 margin: 40px 30px;
22             }
23             .nav li{
24                 width: 200px;
25             }
26             .nav a{
27                 display: block;
28                 color: white;
29                 text-decoration: none;
30                 width: 190px;
31                 padding: 10px;
32                 padding-left: 25px;
33             }
34             .nav a:hover{
35                 background-color: #ff6f00;
36             }
37         </style>
38     </head>
39     <body>
40         <div class="box">
41             <ul class="nav">
42                 <li><a href="#">手机 电话卡</a></li>
43                 <li><a href="#">电视 盒子</a></li>
44                 <li><a href="#">笔记本 平板</a></li>
45                 <li><a href="#">出行 穿戴</a></li>
46                 <li><a href="#">智能 路由器</a></li>
47                 <li><a href="#">健康 儿童</a></li>
48                 <li><a href="#">耳机 音响</a></li>
49             </ul>
50         </div>
51     </body>
52 </html>
  • 单行文字垂直居中

　　　　　让文字的行高等于盒子的高度就可以实现垂直居中

6.CSS背景

  • CSS背景颜色：background-color：transparent（透明）|  color

　　　　注意：一般情况下元素的背景颜色默认为transparent

  • CSS背景图片

　　　　background-image属性描述了元素的背景图片，实际常见于logo或者一些装饰性的小图片，优点是非常便于控制位置

参数值 作用
none 无背景图（默认的）
url 使用绝对或相对地址指定背景图像
    • 背景平铺：通过background-repeat来设置的（repeat | no-repeat | repeat-x | repeat-y）默认情况下，背景平铺
    • 背景位置：background-position: x, y进行控制
      • 参数代表的意思是：x坐标和y坐标，可以使用方位名词或者精确单位
参数值 说明
length 百分数 | 由浮点数字和单位标识符组成的长度值
position top|center|bottom|left|center|right 方位名词
      • 如果指定的两个值都是方位名词，则两个值的前后顺序无关，比如：right top和top right效果一致
      • 如果只指定了一个方向名词，另一个值省略，则第二个值默认居中对齐
    • 背景位置精确单位：background-position: x, y
      • 第一个一定是x坐标，第二个是y坐标
    • 背景图像固定（背景附着）
      • background-attachment属性设置背景图像是否固定或者对着页面的其余部分滚动
      • background-attachment：scroll（滚动） | fixed（固定）
    • 背景复合写法：background:背景颜色，背景图片地址，背景平铺，背景图像滚动，背景图像位置
    • 背景颜色半透明：background：rgba（0,0,0,0.3），最后一个参数是alpha透明度，取值在0~1之间
      • 注意背景半透明是指蛾子背景，盒子里面的内容不受影响
      • CSS3新增的属性，是IE9+版本浏览器才支持 

7.CSS的三大特性

  • 层叠性

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

    • 样式冲突，遵循的原则是就近原则，哪个离样式结构近，就执行哪个样式
    • 样式不冲突，不会层叠
  • 继承性
    • CSS中的继承 子标签会继承父标签的某些样式，如文本颜色和字号。
    • 行高的继承：如果子元素没有设置行高，就会继承父元素的行高倍数乘以自己的字体大小
  • 优先级
选择器 选择器权重
继承或者* 0,0,0,0
元素选择器 0,0,0,1
类选择器，伪类选择器 0,0,1,0
ID选择器 0,1,0,0
行内样式 style = "" 1,0,0,0
!important 重要的 ∞无穷大
    • 权重叠加：如果是复合选择器则需要权重叠加
posted @ 2022-03-27 12:09  Miraitowa56  阅读(178)  评论(0)    收藏  举报