[CSS]一文掌握

王震是也

已于 2024-08-10 13:38:22 修改

阅读量459

点赞数 19

分类专栏： H5C3 文章标签： css

于 2024-08-10 13:37:20 首次发布

本文链接：https://blog.csdn.net/CSDN20221005/article/details/141089781

版权

H5C3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

基础认识

CSS全称层叠样式表, 用来给HTML标签设置样式

语法规则

CSS标点符号都是英文状态;
每一个样式键值对都要分号结尾;

引入方式

内嵌式: 写在style标签中, 通常写在head标签中

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      p {
        color: red;
      }
    </style>
  </head>

  <body>
    <p>随便一个标签</p>
  </body>

</html>

外联式: 写在单独的.css文件中, 通过link标签在网页中引入

p {
  color: red;
}

行内式: 写在标签的style属性中

<p style="color: red;">随便一个标签</p>

基础选择器

选择器的作用就是选择标签, 然后设置样式

/* 标签选择器 */
标签名 {
  css属性：属性值;
}

/* 类选择器 */
.类名   {
  css属性：属性值;
}

/* id选择器： */
#id值 {
  css属性：属性值；
}

/* 通配符选择器： */
* {
  css属性：属性值；
}

字体样式

字体大小：font-size （数字+px）

字体粗细：font-weight （正常400/加粗700）

字体样式：font-style （正常normal / 倾斜 italic）

字体系列：font-family （"Microsoft YaHei", 黑体, 宋体, 楷体, sans-serif）

文本样式

文本缩进：text-indent (数字+px / 数字+em)

文本水平对齐方式：text-align (left/ center/ right)

文本装饰：text-decoration

文本垂直对齐方式:

文本类型元素的垂直方向的排版根据基线调整

.box {
  /* 设置文本为基线对齐(默认) */
  vertical-align: baseline;
  /* 设置文本为顶部对齐*/
  vertical-align: top;
  /* 设置文本为中部对齐 */
  vertical-align: middle;
  /* 设置文本为底部对齐 */
  vertical-align: bottom;
}

可以解决:

文本框和表单按钮无法对齐的问题
input和image无法对齐的问题
div中的文本框, 无法贴顶的问题
div不设置高度由image撑开, 此时image标签下面会存在额外间隙的问题
使用line-height让image标签垂直居中的问题

文本行高：line-height

作用: 控制一行的上下间距
取值: 数字+px 或数字(当前字号的倍数）
单行文本垂直居中: line-height: 文字父元素高度
取消上下间距: line-height: 1

文本阴影：text-shadow

h-shadow（必须, 水平偏移量，可以负值）
v-shadow（必须, 垂直偏移量，可以负值）
blur (可选，迷糊度）
color (可选，阴影颜色）
阴影可以叠加设置, 每组阴影取值之间用逗号分隔

超出文本变点:

浮动布局:

text-overflow:ellipsis; 文本超出变点
white-space:nowrap; 文本超出不换行
overflow:hidden; 超出部分隐藏

弹性布局:

给容器的父级设置:flex:1; width:0;
或者给容器设置具体宽度,
再给子级盒子设置三行代码;

多行文字

.ellipsis-2 {
  overflow:hidden; 
  text-overflow:ellipsis; 
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

调式工具

使用调试工具可以帮我们快速调试样式或者定位样式问题

进阶选择器

复合选择器

/* 后代选择器(空格) */
/* 找后代 */
选择器1  选择器2 {
  css属性：属性值;
}

/* 子代选择器 */
/* 找儿子 */
选择器1 > 选择器2 {
  css属性：属性值;
}

/* 并集选择器(逗号) */
/* 谁和谁 */
选择器1 , 选择器2 {
  css属性：属性值；
}

/* 交集选择器(紧挨着) */
/* 既是又是 */
选择器1选择器2 {
  css属性：属性值；
}

伪类选择器

/* 作用: 选中鼠标悬停在元素上的状态  */ 
div:hover {
   设置鼠标悬停时元素的状态
}

链接伪类选择器

/* 作用: 选中元素的不同状态  */
a:link {
   选中a链接未访问过的状态
}  

a:visited {
   选中a链接访问之后的状态
}    

a:hover {
   选中鼠标悬停的状态
}     

a:active {
   选中鼠标按下的状态
}

焦点伪类选择器

input:focus {
  用于选中元素获取光标时的状态，常用于表单控件
}

check:checked {
  用于选中被勾选的复选框
}

属性选择器

通过元素上的html属性来选择元素，常用于input标签

例子: input[type="text"] { } 选中页面中所有的文本框

例子: input[value='123'] { } 选中页面中的文本框并且该文本框的value值是123

深度选择器:

父组件的样式需要影响子组件的样式时, 需要用到深度选择器, 达到样式穿透的效果

原生css: >>>

less写法: /deep/

scss写法: ::v-deep

emmet语法

帮助我们快速生成标签和选择器代码

背景属性

1.背景颜色：
代码：background-col
取值：关键字，rgb，rgba，十六进制

2.背景图片：
代码：background-image
取值：图片路径

3.背景平铺：
代码：background-repeat

4.背景位置：
代码：background-position: 水平方向垂直方向;
取值：

方位名词：(left center right) (top center bottom)
数字+px: 10px(水平向右) 10px(垂直向下)

5.背景图片大小：
代码：background-size:宽度宽度；
取值：

数字px
百分比（相当于设置盒子自身的宽高百分比）
contain（将背景图片等比缩放，直到不会超出盒子的最大）
cover（将背景图片等比缩放，直到刚好填满整个盒子没有空白）

元素显示模式

1.块级元素

属性：display:block

特点：独占一行，宽度默认是父元素的宽度，高度有内容撑开。可以设置宽高。

例如：div、h、ul、ol、li、p

2.行内元素

属性：display:inline

特点：独占一行，宽度默认是父元素的宽度，高度由内容撑开。可以设置宽高。

例如：span、i、b、strong、em、tt、del、u、s、sub、sup 、a、img、select>option、input

3.行内块元素

属性：display:inline-block

特点：一行显示多个,可以设置宽高。

例如：input, textarea,button，select

说明：img标签具有行内块元素的特点

4.元素显示模式转换

display:block 转换为块级元素

display:inline-block 转换为行内块级元素

display:inline 转换为行内元素

5.嵌套规范

块级元素一般作为大容器使用, 可以嵌套任意标签，但是p标签不要嵌套块级元素
a标签可以嵌套任意标签, 但是不要重复嵌套

CSS特性

继承性

子元素默认继承父元素的样式的特点。

可继承的常用属性：

1，color

2, font字体系列

3，text文本系列

4，行高

层叠性

1, 给一个标签设置不同的样式，样式会层叠，共同生效。

2, 给一个标签设置相同的样式，样式会覆盖，下方生效。（排除优先级问题）

优先级:

不同的选择器有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式

公式：继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<！important

注意：！important写在属性值前面，分号后面。

！important不能提升继承的优先级。

权重：（ 0 , 0 , 0 , 0 ）

行内 id 类标签

PxCook

使用像素大厨测量设计图的尺寸和颜色, 方便的从psd文件中获取数据

通过软件打开设计图

打开软件
拖拽入设计图
新建项目

常用快捷键

.放大设计图：ctrl 和 +
缩小设计图：ctrl 和 -
移动设计图：空格按住不放，鼠标拖动

常用工具

量尺寸
吸颜色

从psd文件中直接获取数据

切换到开发界面，直接点击获取数据

盒子模型

盒子模型由内容(conten)，内边距(padding)，边框(border)，外边距(margin)组成

组成部分

内容：

width和height属性设置内容区域的大小，取值为数字+px。

边框：

border-width设置边框粗细，(数字+px)
border-style设置边框样式，（实线solid/虚线dashed/点线dotted）
border-color设置边框颜色，

内边距：

padding: 数字px
常见取值：1个值对应四边，2个值为对应上下/左右，3个值对应上/左右/下，4个值对应上/右/下/左。

外边距：

margin:数字px
常见取值：1个值对应四边，2个值为对应上下/左右，3个值对应上/左右/下，4个值对应上/右/下/左。
单独设置： margin-left/right/top/bottom，分别设置盒子的对应移动。

自动内减

使用 box-sizing: border-box; 属性可以切换为IE模型
IE盒模型的padding或者border不会撑大盒子, 而是自动在内容中减去

特殊现象

1.外边距折叠---合并现象:

场景1：垂直布局的块级元素，上下的margin会合并。

造成：两者之间的距离为2个margin中的最大值

解决：只给一个盒子设置margin值。

2.外边距折叠---塌陷现象:

场景2：互相嵌套的块级元素，子元素的margin-top会作用在父元素上。

结果：父元素一起往下移动。

解决：

1，给父元素设置border-top或者padding-top(分割父子元素的margin-top）

2，给父元素设置overflow:hidden

3，转换为行内块元素

4，设置浮动

3.内外边距失效---行内元素

水平方向的margin和padding生效
垂直方向的margin和padding失效

4.不会撑大盒子---块级元素

如果子盒子没有设置宽度, 默认宽度是父元素的100%
此时给子盒子设置左右的padding或者左右的border, 不会撑大盒子

结构伪类选择器

常用于查找某父级选择器中的子元素。

n的常见取值

伪元素

使用伪元素也可以创建网页内容, 一般页面中的非主体内容可以使用伪元素

语法

元素：由html标签渲染的内容。
伪元素：由css模拟出的标签效果。
伪元素必须设置content属性才能生效
伪元素默认是行内元素

标准流

标准流又称文档流, 是浏览器在渲染内容时, 默认的排版规则

排版规则:

块级元素, 从上往下, 垂直布局, 独占一行
行内或行内块元素, 从左往右, 水平布局, 空间不够自动换行

浮动

浮动早期用来实现文字环绕图片效果, 后来逐步用于网页布局, 浮动的特点就是让垂直布局的盒子变成水平布局

属性名：float

属性值:

特点：

脱标: 脱离标准流
层级: 浮动元素比标准流元素高半级, 会覆盖标准流元素
浮动找浮动: 下一个浮动元素会在上一个浮动元素后面左右浮动
浮动元素有特殊的显示效果：一行显示多个，可以设置宽高
居中：浮动元素无法通过text-align:center或margin：0 auto让元素本身水平居中

清除浮动：

浮动元素会脱标. 所以浮动元素就无法撑开标准流的块级父元素, 清除浮动就是为了解决这种影响

网页布局中, 父元素通常需要有高度, 不然会影响其他的元素

设置高度法:

给父元素设置固定高度, 但有些布局中不能固定父元素高度。

额外标签法:

给父元素的末尾添加一个块级元素, 给该元素设置 clear: both; 属性
clear 是用于清除浮动属性, 取值为both(清除全部) 或 left(清除左浮动）或 right（清除右浮动）

单伪元素清除法：

用伪元素替代了额外标签, 可以视为固定写法, 直接给标签添加类名即可清除浮动

clearfix::after {
    content:'';
    display:block;
    clear:both;
    height:0;
    visibility:hidden;
}

双伪元素清除法：

能够应对复杂的浮动布局, 并且兼容性更好

.clearfix::before,
.clearfix::after {
     content:'';
     display:table;
}
.clearfix::after {
     clear:both;
}

overflow清除法:

给父元素设置 overflow:hidden;属性, 原理是开启一个BFC
BFC是块级格式化上下文, 是一块独立的渲染区域
BFC 在计算高度时，内部浮动元素的高度也计算在内，所以BFC 的高度不会发生塌缩，就达到了清除浮动的效果。

定位

通过定位属性, 可以让元素自由的摆放在任意位置, 常用于盒子之间层叠的场景

定位：position

取值： static 静态定位（标准流，不能通过方位属性进行移动）

relative 相对定位（根据自己之前的位置移动，用于小范围移动，不脱标）

absolute 绝对定位（默认相对浏览器可视区移动或最近的有定位的祖先元素移动。脱标）

fixed 固定定位（根据浏览器可视区域移动，用于屏幕固定）

偏移：水平 left左数字px

水平 right右数字px

垂直 top上数字px

垂直 bottom下数字px

子绝父相

让子元素相对于父元素进行自由自动, 父元素使用相对定位, 子元素使用绝对定位

如果布局时, 父元素已经有了定位方式, 直接设置子元素绝对定位即可, 而不用修改父元素的定位方式

元素的层级:

1，不同元素的层级：定位 > 浮动 > 标准流

2，不同定位的层级：

相对定位, 绝对定位, 固定定位默认层级相同，
此时浏览器根据html结构显示元素,
下面的元素覆盖上面的元素 (下面的代码覆盖上面的代码))

3，更改元素层级：

属性名：z-index
属性值：数字，数字越大层级越高。

光标

通过css设置鼠标光标在元素上显示的样式

属性名: cursor

属性值

边框圆角

通过 border-radius 属性, 让盒子的角变得圆润, 支持数字+px 或者百分之

溢出隐藏

控制盒子内容超出盒子的区域, 可以设置为隐藏/滚动条效果等

属性名: overflow

属性值

元素隐藏

让元素本身在屏幕中不可见

常见属性：

visibility:hidden; （隐藏元素，在网页中占位置）
display:none/block; （隐藏元素，在网页中不占位置)
opacity: 0-1; （0表示完全透明，1表示完全不透明) (内容会一起变透明)

三角形

用css设置三角形, 利用盒子边框完成

步骤：

1，设置一个盒子 (可以是正方形)

2，设置四周不同颜色的边框

3，将盒子宽高设置为0

4，保留其中一个三角形，其他设置为透明

5, 通过调整不同边框的宽度, 调整三角尺的形态

精灵图

精灵图就是多张小图片合并成的一张大图片, 目的是减少请求次数, 提高网页加载速度

步骤

1，创建一个盒子

2，量取图片尺寸，将图片的尺寸设置给盒子

3，将精灵图设置为盒子背景照片

4，量取精灵图左上角坐标，分别取负值设置给盒子的背景坐标（background-position:x y;）

盒子阴影

给盒子添加阴影效果,

属性：box-shadow

取值：

例子: box-shadow: 0px 0px 10px #c3c3c3;

过渡属性

让元素的样式慢慢发生变化, 常配合hover使用

属性名：transition

取值：

过渡属性（all：全部可过渡属性过渡或者具体属性名：指定属性过渡）
过渡时长（数字+s）

注意：

过渡需要：默认状态与hover状态有不同，才能用过渡效果。
transition属性要给需要过渡的元素添加。
设置在不同状态中, 效果不同

给默认状态设置, 鼠标移入移出都有过渡效果
给hover状态设置, 鼠标移入有过渡效果, 鼠标移出没有过渡效果

开发规范

网站和网页

网页相当于纸, 网站相当于一本书, 多个网页整合在一起, 称之为网站

骨架结构

1.文档声明

<!DOCTYPE html>用于声明文档的类型, 告诉浏览器该网页的HTML版本, 不同版本的HTML遵循的标准不同,浏览器渲染的方式就所有不同

DOCTPYE必须写在页面的第一行, 并且它不属于HTML标签

2.网页语言

<html lang="en">用于指定网页的语言环境, 可以帮助搜索引擎对网页进行归类

常见语言: zh-CN 简体中文 / en 英文

3.字符编码

<mete charset="UTF-8">用于设置网页的字符编码格式

作用: 不同的国家有不同的语言, 要让所有的语言在网页中都能正常显示, 就需要大家遵循同一套编码规范
原则: 保存和打开的字符编码要统一, 否则可能出现乱码
万国码: 开发中统一使用UTF-8字符编码, 这是国际化的字符编码, 收录了全球的语言文字

SEO标签

SEO全称搜索引擎优化, 旨在让网站在搜索引擎的排名靠前

1.网页标题标签:

<title>膏贴系列 | 外用膏贴 | 膏贴贴牌 | 膏药贴牌 | 膏贴OEM＿河南裕海医药科技有限公司官网</title>

2.网页描述标签:

3.网页关键词标签:

ico图标

显示在标签页左侧的小图标, 一般使用.ico格式的图标

<link rel="shortcut icon" href="url" type="image/x-icon">

ico图片放在根目录里面
快捷选中: link:favicon;

版心

版心就是设置一个宽度, 把页面内容约束在网页的中间, 使不同尺寸的屏幕都能完整的看到网页内容

/* 版心 */
.container {
    width:1240px;
    margin:0 auto;
}

补充：版心其他常用类名container, wrapper, w等

css书写顺序

不同的CSS书写顺序会影响浏览器的渲染性能, 推荐养成专业的书写顺序

基本原则就是从大到小的书写CSS代码, 先布局, 再外观, 再细节
推荐多用类+后代，选择器的总个数尽量不要超过3个

目录结构

完整的项目目录及文件结构, 良好的目录结构帮助我们高效的管理项目

根目录下新建images文件夹(固定使用的图片素材)(logo, 精灵图, 装饰图片)
根目录下新建uploads文件夹(临时使用的图片素材)(商品图, 占位图, 宣传图)

新建base.css文件(基础公共样式)(样式初始化)
新建common.css文件(重复使用的样式)(头部,底部)
新建index.css文件(首页样式)

favivon.ico文件(一般放在根目录)
样式初始化代码

/* 样式初始化 */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
input {
  margin: 0;
  padding: 0;
}

* {
    box-sizing: border-box;
}

body {
  /* 字体默认16px,行高1.5倍 */
  font-size: 16px/1.5;
  color: #333;
}

ol,
ul {
  list-style: none;
}

em,
i {
  list-style: none;
}

a {
  text-decoration: none;
  color: #333;
}

img {
  vertical-align: middle;
}

input {
  border: none;
  outline: none;
  color: #333;
}

/* 用clearfix类名清除浮动 */
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

.fl {
  float: left;
}

.rl {
  float: right;
}

王震是也

关注

19
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
[CSS]一文掌握

公司坚持走科技创新之路，依靠我们创立的知识产权的高科技产品，来保证公司具有持续的发展潜力，公司高度重视以市场为导向，具有前沿领先技术的研发能力，公司有专业科研机构和人员从事创新的研究和开发工作，销售业务覆盖全国各地，经过10年的发展壮大，已成为全国销量第一的贴膏生产基地。DOCTYPE html>用于声明文档的类型, 告诉浏览器该网页的HTML版本, 不同版本的HTML遵循的标准不同,浏览器渲染的方式就所有不同。父组件的样式需要影响子组件的样式时, 需要用到深度选择器, 达到样式穿透的效果。
复制链接

扫一扫

专栏目录