第二天CSS学习心得

最新推荐文章于 2023-02-08 18:42:56 发布

叮咚东

最新推荐文章于 2023-02-08 18:42:56 发布

阅读量476

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_44467405/article/details/122949983

版权

今日知识点：

1、css基础选择器优先级

2、css文本相关属性

3、css选择器进阶（6个）

4、盒模型

初识CSS

学习目标

能够说出什么是CSS
熟悉CSS的语法规范
掌握CSS的三种引入方式，能够使用3种引入方式写一个红色的小方块

什么是CSS?

全称

Cascading Style Sheets
通常称为CSS样式表或层叠样式表（级联样式表）

作用

为HTML标记语言提供了一种样式描述
即【设置HTML页面中的元素的位置、排版、样式外观等】
如文本内容（字体、大小、对齐方式等）、图片的外形（宽、高、边框等）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cy1fu969-1644919834670)(image-20210404220754003.png)]

CSS语法规范

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qkZ86Rjo-1644919834672)(image-20210427204717914.png)]

CSS 规则由两个主要的部分构成：选择器、一条或多条声明

选择器:通常是需要改变样式的 HTML 标签。

声明组：以大括号{}括起来

每条声明由一个属性和一个值组成,
属性与属性值之间以【冒号】分隔
多个声明，用【分号】将每个声明分开

CSS引入方法

当读到一个样式表时，浏览器会根据它来格式化 HTML 文档，插入样式表的方法有三种:行间样式表，内部样式表，外部样式

行间样式

概述：

通过HTML元素的style属性设置样式称为行间样式

代码示例

<div style="width:100px;height:100px;background-color:red;">div</div>

注：任何HTML元素都可以设置行间样式

内部样式

概述：

在HTMLhead标签的内部，由style标签包含的样式称为内部样式
代码示例
```
<head>
	<style>css样式
</style>
```

外部样式

概述
- 外部样式表是指将CSS编写在扩展名为.css 的单独文件中,使用link标签引用
  - 新建外部样式表
  - 头部标签内部使用link标签引用
```
<head>
	<link rel="stylesheet" href="style.css">
</head>
```
  - 说明
    - href="" 资源链接的地址
    - rel表示引入文件与当前文档的关系
    - stylesheet为样式表

总结：

行间样式适用于某个元素拥有特殊样式时使用，结构表现【不分离】
内部样式适用于单个页面拥有特殊样式时使用，结构表现【半分离】
外部样式适用于多个页面拥有相同样式时使用，结构表现【相分离】

CSS选择器

学习目标

掌握常用选择器的使用
熟悉选择器的优先级关系
掌握调试工具的基本使用

什么是选择器

CSS选择器是CSS规则的第一部分，每个CSS规则都以一个选择器或一组选择器为开始，
CSS 选择器即用于“查找”（或选取）要设置样式的 HTML 元素的模式
选择器可以分为基础选择器、复合选择器

基本选择器

通配（通用）选择器

语法 *{ 样式声明 }
作用：匹配任意类型的HTML元素

<style>        
    /* 页面上所有元素都被选择 */
    *{
        background-color:green;
    }
        
</style>
<body>
    <p>p</p>
    <div>div1</div>
    <div>div2
        <div>div3</div>
    </div>
    
</body>

元素名称选择器

语法：元素名称{ 样式声明 }
作用：选择所有同一元素名称的所有元素

/* 选择body */
body{
	background-color:green;
}
/* 选择页面上所有的div */
div{
	width:100px;
	height:100px;
	background-color:red;
}
/* 选择页面上所有的p */
p{
	background-color: pink;
}

类选择器

语法
- HTML中通过class属性定义
  如：
- css中以点进行标识:.
  .类名{ 样式声明 }
作用:选择所有带有指定类名的元素
多类名的使用
- 语法：空格隔开

<style>

.box{
	background-color:red;
}

.size{
    width:100px;
    height:100px;

}

</style>
<body>
    <p class="box size">p</p>

    <div class="box">div1</div>
    <div>div2
    <div class="box">div3</div>
    </div>
</body>

id选择器

语法
- HTML中通过id属性定义
  如：
- css中以点进行标识:#
  
  #id名称{ 样式声明 }
作用:选择所有带有指定类名的元素

#box{
	background-color:red;
}
<div id="box">div1</div>

注意：具有唯一性，一般用于页面唯一性的元素如头部、底部等，经常和 JavaScript 搭配使用

类与id的命名规则

见词知义，尽量用英文；
始终建议以字母开头，可以包含数字、字母、下划线等
不要以数字开头
多个单词可以以驼峰式（newsCont）、下划线连接（news_cont）、中划线连接（news-cont）等

总结

总结使用频率
- 基础选择器中最常用是类选择器(写界面的时候不要使用id挑选元素，以类选择器)
- id用于页面中唯一模块
- 元素名称选择器定义的全局样式，单独使用要慎重
- *号通常用于重置样式【最不常用】
总结id与类的区别总结

基础选择器的优先级

对比

渗透调试工具的使用

- F12/右键-检查
- 左边是 HTML 元素结构，右边是 CSS 样式
- Ctrl+滚轮 可以放大、缩小开发者工具代码大小
- Ctrl + 0 复原浏览器大小
- 右边 CSS 样式可以改动数值（左右箭头或者直接输入）和查看颜色
- 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误
- 如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误
- 如果有样式，但是样式被中划线贯穿，说明可能存在书写顺序 或优先级问题

结论

最终排序：id（身份证号是XX的学生）> 类（名叫王小帅的学生） >元素名称（所有男生） > *(所有学生)
选择范围越精确，优先级越高,权重越大

选择器	权重值
*	0
tagName标签名	1
class	10
id	100

复合选择器权重值 = 基础选择器求和

CSS 表格

学习目标

掌握表格常用css属性
能够实现1像素表格细线边框
概述：使用 CSS 可以大大提高效率，更灵活的控制HTML 表格的外观表现

表格边框

指定 CSS 表格边框，使用 border 属性，通常定义td,th的边框属性

表格会呈现双边框，是因为表和 th / td 元素有独立的边界。

table存在默认属性border-collapse：separate

表格的折叠边框

border-collapse表示折叠边框

取值
- separate：边框独立（默认值）
- collapse：相邻边被合并(细线边框)

table{
	border-collapse:collapse;
}
th{
	/*简单代过*/
	border:1px solid red;
}
td{
	border:1px solid red;
}

CSS字体 ,文本属性

学习目标

熟练掌握css常用文本属性
熟练掌握css常用字体属性
能够说出颜色的常用表示方法

font-family：

作用：设置文本的字体系列
语法：font-family:字体名称

常用值：

一个字体名称或系列名称（介绍常用字体名称、字体系列）
- 微软雅黑 Microsoft YaHei
- 宋体 simsun
- 黑体 HeiTi
- 楷体 KaiTi

多个字体名称

逗号分开
如果浏览器不支持第一个字体，则会尝试下一个（回退机制）

.box{
   /*font-family:"微软雅黑","宋体";*/
    /*font-family:"宋体","微软雅黑"; *//*与上一个相比产生的效果不同，谁在前使用哪一个*/
    font-family:"微软雅黑abc","宋体";  /*第一个任意改写一个系统不存在的字体，会按照第二个字体显示*/
}

注意如果字体名称包含空格、汉字、特殊字符，必须加引号。
```
.box{font-family: "Microsoft YaHei";}
```

font-size

作用：设置字体的大小
语法：font-size:值
常用值：
- 长度值（通常是像素px）
- 百分比（相对于父元素计算）
em
- 相对单位
- 如果用于字号，相当于父元素字号计算，如果用于其它属性，相对于当前元素的字号
大多数浏览器的默认值字号：16px

font-style

作用：设置字体的大小
语法：font-style:值
常用值：
- normal默认值
- italic斜体显示

font-weight

作用：设置字体粗细
语法：font-weight:值
常用值：
- normal默认值
- bold加粗
- 100-900九级字重， 400相当于normal,700相当于bold
- 注：不是所有字体都内置了九级字重

line-height

作用：设置行高（效果是产生文本行间距）
语法：line-height:值
特性:实现单行文本的垂直居中
测量：文字高+行间距
常用值
- normal默认。设置合理的行间距。
- px 设置固定的行间距。
- number设置数字，此数值会与当前的字号相乘来设置行间距。
- 百分比:相对于font-size计算
```
.box{
	/*line-height:2;*/
	line-height:200%; /*产生的效果一致都是字号的两倍*/
}
```

font简写

作用：设置所有字体属性
语法：font: 字体风格字体加粗字号/行高字体;
- 依次【空格】隔开
总结：只有当【字号和字体】同时存在简写才是有效的，简写属性可以精简简代码
```
.box2{
	/* font:italic bold 20px "宋体"; */
	font:20px "宋体";
}
```

文本水平对齐方式、垂直对齐、缩进 ,修饰，是否换行显示，单词间距，字母间距，首字母样式…

text-align：

作用：设置文本的水平对齐方式
语法：text-align:值
常用值
- left居左对齐 [默认值]
- right居右对齐。
- center居中对齐。
- justify两端对齐
注：适用于块状元素

u5ZKa5Lic,size_20,color_FFFFFF,t_70,g_se,x_16)

垂直对齐属性(图文对齐上)

vertical-align:top顶线/bottom底线/baseline基线/middle中线;
文本特性元素： 都是以基线对齐的(文字+图片)  而图片的底边就是图片的基线！！

一般来说 我们要修改图片的对齐方式为中线对齐！！但是如果效果不好可以自己去调整！！！

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dFRwupwM-1644919834674)(文字四条线.jpg)]

text-decoration

作用：设置文本装饰
语法：text-decoration:值
常用值
- none 默认。定义标准的文本。【常用】
- underline 定义文本下的一条线【常用】
- line-through 定义穿过文本的一条线。【比较常用】
- overline 定义文本上的一条线。【不常用】

text-indent

作用：设置文本块首行的缩进
语法：line-height:值
常用值
- 默认值：0
- 长度值，px,em(更方便)
- 百分比: 相对于元素内容宽进行计算
- 允许负值

color

作用：设置文字的颜色
语法：color:颜色值
常用值
- 颜色的常用表式方法
  - 颜色名称：如red、blue等
  - 十六进制颜色表示方法
    - 语法：如#ff0000
    - 说明：#rrggbb
      r,g,b取值范围为00-ff
      - r red 红色
      - g green 绿色
    - b blue 蓝色
    - 认识常见颜色的写法
    - 白色（#ffffff）、黑色（#000000）
      红色（#ff0000）、绿色(#00ff00)、蓝色(#0000ff)
    - 颜色简写
  - rgb颜色表示方法
    - 语法：rgb(255,0,0)
    - 说明：rgb(r,g,b)
      r,g,b取值范围为0-255
  - 认识常见颜色的写法
    - 白色： rgb(255,255,255) 、黑色 : rgb(0,0,0)
      红色： rgb(255,0,0) 、绿色： rgb(0,255,0) 、蓝色： rgb(0,0,255)
- transparent透明色rgba(0,0,0,0)

color,font-,line-,text-,list- ，cursor都有继承性除了 text-decocation

控制文本换行属性

控制文本换行 white-space:normal正常(换行)/nowrap不换行，强制一行显示/pre格式化输出

文字转换属性

 文本转换属性text-transform:capitalize首字母大写 /lowercase 小写 /uppercase全大写

字符间距

 p {
            /* 文字间距 letter-spacing:px/em/rem
             */
            letter-spacing: 4px;

   }

单词间距

 单词间距 word-spacing:px/em/rem 
         word-spacing: 30px;

CSS 盒模型

学习目标

能够说出盒模型的概念
熟练运用边框属性实现边框效果与小三角
能够说出margin值的问题及解决
能够使用盒模型完成课堂案例
掌握overflow的应用

概述

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

所有 HTML 标签可以看作盒子，在 CSS 中，“box model” 这一术语是用来设计和布局时使用的。
（即网页布局就是利用 CSS 摆盒子）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n427yUQm-1644919834674)(image-20210413093125084.png)]

盒模型就是盒子在网页上实际占据的区域大小，包含width,height,padding,border,margin;

盒模型的宽度= width + padding-left + padding-right +border-left+border-right+margin-left+margin-right;

内容 content

概述：CSS通过为元素设置width和height属性值来规定元素的content内容区域的大小。
元素的内容及子元素默认从内容区域开始排列。

width

作用：设置宽度
取值
- auto默认值。浏览器可计算出实际的宽度。
- 先只讲px

height

作用：设置高度
取值
- auto默认值。浏览器可计算出实际的宽度。
- 先只讲px

边框 border

边框是围绕内容和内边距之间的一条或多条线，通过边框属性指定一个元素的边框的宽度、样式和颜色

border-width边框宽度

作用
- 设置所有边框宽度，或者单独地为各边边框设置宽度
取值
- 长度值
- 不允许指定负长度值。
语法
- 空格隔开1-4个值
  - 1个值设置所有边框宽度
  - 2个值设置上下、左右
  - 3个值设置上、左右、下
  - 4个值设置上、右、下、左
- 代码示例
  - border-width:10px;
  - border-width:10px 20px

border-style边框样式

作用
- 设置标签所有边框的样式，或者单独地为各边设置边框样式。
取值
- none 定义无边框。
  dotted 定义点状边框。
  dashed 定义虚线。
  solid 定义实线。
  double 定义双线。双线的宽度等于 border-width 的值。
- 其他（了解）
  
  $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SCYvrf08-1644919834675)(E:\临时文件\新大纲\新大纲课件\day03\笔记\image-20210413093606178.png)]$
语法
- 空格隔开
  1-4个值
  - 1个值设置所有边框
  - 2个值设置上下、左右
  - 3个值设置上、左右、下
  - 4个值设置上、右、下、左
- 示例
  - border-style:solid;
  - border-width:solid dashed
  - …
注意：只有当这个值不是 none 时，边框才可能出现。如果边框样式是 none，边框宽度实际上会重置为 0

border-color 边框颜色

作用：设置所有边框颜色，或者单独地为各边边框设置颜色
取值
- name - 指定颜色的名称，如 “red”
  RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
  Hex - 指定16进制值, 如 “#ff0000”
语法
- 示例
  - border-color:red;
  - border-width:red blue;
  - …
- 1-4个值
  空格隔开
  - 1个值设置所有边框
  - 2个值设置上下、左右
  - 3个值设置上、左右、下
  - 4个值设置上、右、下、左

简写

授课思路：
（1）先讲四个边简写与讲师演示
（2）简单介绍单个边语法及拆份写法引导学员自主尝练习（讲师可不进行演示）

定义四个边

语法：border:样式宽度颜色
空格隔开
代码示例

单个方向定义

说明：
每个边框都可以设置样式宽度颜色
border-方向：宽度样式颜色
语法：空格隔开

拆分语法

border-方向-width:
border-方向-color
border-方向-style

注意:边框会影响盒子实际大小，样式、宽度、颜色无书写顺序要求

内边距 padding

CSS padding（内边距）属性，定义元素边框与标签内容之间的空间。
padding 可以单独改变元素的上、下、左、右边距，也可以一次改变所有的属性。

单个方向设置

padding-bottom 设置标签的下内边距。
padding-left 设置标签的左内边距。
padding-right 设置标签的右内边距。
padding-top 设置标签的上内边距。
代码演示（强调：padding会影响盒子的实际大小）
取值
- 先讲px,
- 不可使用负值，

简写

语法：padding空格隔开1-4个值
规则：1个值：表示【四个方向】的内边距值
2个值：分别表示【上下，左右】的内边距值
3个值：分别表示【上，左右，下】的内边距值
4个值：分别表示【上，右，下、左】的内边距值
代码演示

外边距margin

概述：用于设置盒子与盒子之间的距离。margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性

单个方向定义

margin-bottom 设置标签的下内边距。
margin-left 设置标签的左内边距。
margin-right 设置标签的右内边距。
margin-top 设置标签的上内边距。
代码示例

简写

语法：空格隔开
取值1-4个规则
取值
- px,
- auto浏览器自动计算
- 允许使用负值
外边距应用
- 外边距实现已知宽度的块级盒子居中

【综合案例:企业公告.jpg 】

外边距问题

典理情形一

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C6Dr5ebA-1644919834675)(2-元素嵌套.png)

结构关系：嵌套块元素的垂直外边距塌陷
问题描述：当父元素没有padding,margin,border时子元素与父元素直接相临，子元素的margin值会传递给父元素并且再次与父元素的margin值发生合并最终的结果最终结果是正值取两者中的较大值，负值取绝对值较大的值
表现：父子元素公用一个外边距
解决方法
- 给父元素设置边框或内边距（慎用）
- 父元素overflow:hidden,改变渲染规则

典型情形二

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QN8wTA3s-1644919834675)(E:\临时文件\新大纲\新大纲课件\day03\笔记\1-元素并列-1618277947139.png)]$

结构关系：相邻元素垂直外边距合并
问题描述：当两个块级兄弟元素垂直方向上的margin值直接相遇,会发生合并，最终结果是正值取两者中的较大值，负值取绝对值较大的值
表现：两个外边距合并成一个
解决方法
- 方法1.尽量只定义其中一个的margin值
- 方法2.给其中一个盒子加父元素overflow:hidden,改变渲染规则
其他情况同上【简单带过——如后代元素出现同类问题等】

总结：

（1）设问通过对盒模型的实际使用对比出它与快递盒子的不同之处？
（2）总结盒子模型占位的计算：width/height + padding + margin
（3）提示学生注意实际开发的过程中要明确测量的宽高是内容宽还是包括了padding的占位宽高
（4）垂直方向上相遇的margin值出现折叠问题

overflow详解

概述：溢出元素内容区的内容会如何处理

取值
- visible 默认值。内容不会被修剪，会呈现在元素框之外。
- hidden 内容会被修剪，并且其余内容是不可见的。
- scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
- auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
应用：京东产品描述的超出隐藏

叮咚东

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第二天CSS学习心得

今日知识点：1、css基础选择器优先级2、css文本相关属性3、css选择器进阶（6个）4、盒模型初识CSS学习目标能够说出什么是CSS熟悉CSS的语法规范掌握CSS的三种引入方式，能够使用3种引入方式写一个红色的小方块什么是CSS?全称Cascading Style Sheets通常称为CSS样式表或层叠样式表（级联样式表）作用为HTML标记语言提供了一种样式描述即【设置HTML页面中的元素的位置、排版、样式外观等】如文本内容（字体、大小、对齐方式等）、图片的外形（
复制链接

扫一扫