CSS学习（一）

最新推荐文章于 2024-05-21 21:13:29 发布

大面积秃头

最新推荐文章于 2024-05-21 21:13:29 发布

阅读量73

点赞数 1

分类专栏：前端笔记文章标签： css 学习 css3

本文链接：https://blog.csdn.net/wode39/article/details/126094858

版权

笔记同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

前端

7 篇文章 0 订阅

订阅专栏

CSS

CSS简介

CSS作用

美化网页
html关注语义，丑

CSS语法规范

CSS规则
- 选择器
  - 概念
    - 选择器是用于指定CSS样式的HTML标签，{}内是对该对象设置的具体样式
  - 属性
    - 属性和属性值是以键值对的形式出现
    - 属性是指定对象设置的样式属性，例如字体大小，文本颜色等
    - 属性和属性值之间用英文“：”分开
    - 多个键值对之间用英文分号结尾
- 一条或多条声明

CSS

CSS是层叠样式表的简称，也叫CSS样式表，或者级联样式表
主要作用于html中文本显示内容，页面版面布局和外观样式

CSS代码风格

格式书写
- 展开型
- 紧凑型
样式的大小写
- 一般情况使用小写
空格的使用规范
- 属性值前面，冒号后面，保留一个空格
- 选择器标签和大括号中间保留空格

CSS的选择器

作用

根据不同需求把不同标签选出来，即选择标签

分类

基础选择器
- 由单个选择器组成
- 类选择器
  - 可以选择某一个或者某几个
  - 结构：用class调用
  - 注意
    - 类选择器使用"."进行标识，后面紧跟类名
    - 可以理解为给这个标签起了一个名字，来表示
    - 长名称或词组可以使用中横线来为选择器命名
    - 不要使用纯数字，中文等命名。尽量使用英文字母来表示
    - 命名要有意义，尽量使得别人一眼就知道这个类名的目的
    - 命名规范：
      - 同一个标签可以有多个类名
  - 多类名的使用场景
    - 可以吧一些标签元素相同的样式共同部分放到一个类里
    - 这些标签可以调用公共的类，然后在调用自己独有的类
    - 优点：节省了CSS代码，统一修改方便
- 标签选择器
  - 标签选择器
    - 缺点
      - 不能指定某一标签
    - 优点
- id选择器
  - 概念
    - id 选择器可以为标有特定的id属性来设置id选择器，CSS中ID选择器以#来定义
  - 类选择器和id选择器的区别：
    - 类型选择器好比人的名字，一个人可以有多个名字
    - id选择器好比人的身份证好拿，全国唯一，不能重复
    - ID选择器和类选择器最大的不同在于使用次数上
    - 类选择器在修改样式中最多，id选择器一般用于也米阿尼唯一的元素上，经常和JavaScript搭配使用。
- 通配符选择器
  - 概念
    - 在CSS中，通配符选择器使用*定义，它表示选取页面中所有元素
  - 通配符选择器不需要调用，自动就给所有元素使用样式
复合选择器
- 后代选择器
  - 又称为包含选择器，可以选择父元素里面子元素
- 并集选择器
  - 并集选择器可以为多组标签，同时为他们定义相同样式
  - 语法：元素1，元素2
- 伪类选择器
  - 伪类选择器用于向某些选择器添加特殊效果
  - 特点：用冒号表示
  - 分类
    - 链接伪类
      - a:link
        
        用于所有未被访问的链接
      - a:visited
        
        选择所有已经被访问的链接
      - a:hover
        
        选择鼠标指针位于其上的链接
      - a:active
        
        选择活动链接（鼠标按下未弹起）
      - 书写顺序要注意 link，visited，hover，active
    - 特殊伪类：
      - ：focus
        
        用于选取获得焦点的表单元素
    - 结构伪类
- 交集选择器
- 组合选择器
  - 子代选择器
    - 用空格隔开
  - 子选择器
    - 用>进行选择
  - 相邻兄弟选择器
    - 用+进行选择
  - 通用兄弟选择器
    - 用~进选择
- 属性选择器
  - 带有某一属性
    - 标签名【属性】
  - 选取带有指定属性和值的元素
    - [attribute=“value”]
  - [attribute|=“value”] 选择器用于选取指定属性以指定值开头的元素
  - [attribute^=“value”] 选择器用于选取指定属性以指定值开头的元素。
  - [attribute$=“value”] 选择器用于选取指定属性以指定值结尾的元素。
  - [attribute*=“value”] 选择器选取属性值包含指定词的元素。

CSS字体

字体系列

font-family定义文本的字体系列
各种字体之间用英文逗号隔开
尽量使用系统默认自带字体
常见的几个字体：Microsoft Yahei,Tohoma,Hiragino Sans GB

字体粗细

CSS使用font-weight设置字体粗细
字体粗细：bold（700），normal（400），lighter

文字样式

CSS使用font-style设置文字样式
font-style：Italic/normal;

字体复合属性

font ： font-style font-weight font-size font-height font-family
要使用文字的复合属性，至少要有字体大小和字体系列

CSS文本属性

文本颜色用color
- 预定颜色值
- 十六进制
- RGB代码格式
文本对齐
- 用text-align来表示
- 有left（默认），right，center三个值
装饰文本
- 用text-decoration装饰文本
- 属性值有：none(默认)，underline,overline,line-through
文本缩进
- 用text-indent指定文本的第一行缩进
- em是一个相对单位
  - text-indent : 2em;
行间距
- 用line-height用于设置行间距（行高），用于控制文字行与行之间的距离
处理空白
- white-space
  - normal 默认自动换行
  - nowrap 不换行
  - pre 保留空格
  - 对溢出内容显示省略号
    - {white-space：nowrap;overflow:hidden;text-overflow:ellipsis}

CSS的引入方式

行内样式表

行内式
- 适合修改一些简单样式
- 直接在标签内部的style属性中设定CSS样式
- 可以控制当前标签样式
- 没有体现结构与样式相分离

内部样式表

嵌入式
- style标签一般放在head标签中
- 通过此方式，可以方便控制当前整个页面中的元素样式设置
- 代码结构清晰，但是并没有实现结构与样式想分离

外部样式表

链接式
- 适合样式比较多的情况，核心是将样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。
- 引入样式表分两步
  - 新建一个.css 文件，写入相应的样式，即把css 样式写入该文件
  - 在html中，使用link标签引入这个文件
- 好处：可以控制多个页面

Emmet语法

html

带有类名或者id名的直接写.demo 或者 #two就可以了
兄弟级标签用+
父子级标签用>
如果想要在生成的标签内部写内容可以用{}表示
如果生成的div类名是有顺序的，可以使用自增符号$

CSS

w200按tab键可以快速生成 width :200px;

格式化代码

Shift +Alt+f
ctrl+S

元素的显示模式

元素显示模式的转换

转换为块元素
- display:block
转换为行内元素
- display :inline
转换为行内块
- 子主题 1

CSS背景background

背景颜色background-color

背景图片background-image

默认值是none
地址：url(url)

背景平铺background-repesat

repeat/no-repeat/repeat-x/repeat-y
默认情况下是平铺

背景图片的位置background-position

background-postion:x,y;
- 方位名词 left top right center bottom
  - 如果只指定一个方向，另一个省略，第二个默认居中对齐
- 精确坐标
  - 如果参数是精确坐标，那么第一个肯定是x轴坐标，第二个一定是y轴坐标
  - 如果只指定一个数值，那么该数值一定是x坐标，另一个默认垂直居中
- 混合单位，第一个值一定是x坐标，第二个一定是y坐标

背景固定background-attachment

scroll(默认)/fixed

背景属性复合background

背景颜色背景图片背景平铺背景图像滚动背景图片位置

背景颜色透明

背景色半透明，内容不受影响
opacity
- 透明

CSS的三大特性

层叠性

应用场景
- 给相同的选择器选择相同的样式，样式冲突，就近原则
- 样式不冲突，不用层叠

继承性

子标签会继承父标签的某些样式，比如文本颜色和字号
行高的继承
- 文字大小/行高
- 行高可以跟单位，可以不跟行高（当前文字大小的XX倍）

优先级

当同一个元素指定多个选择器，就会有一些优先级的产生
选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行
- 继承或者通配符选择器
  - 权重为0000
- 元素选择器
  - 0001
- 类选择器，伪类选择器
  - 0010
- id选择器
  - 0100
- 行内样式style=“”
  - 1000
- ！import
  - 无穷大
- 注意：无论父元素权重多高，子元素继承的权重都为0
优先级叠加
- 权重虽然有叠加，但是永远不会有进位的问题

盒子模型

网页布局过程

1.先准备好相关网页元素，网页元素基本都是盒子
2.利用CSS 设置好盒子样式，然后摆到相应位置
3.往盒子里面装内容

本质：

盒子模型的本质是一个盒子，封装周围html元素

组成

边框border
- 边框宽度
  - border-width
- 边框样式
  - border-style
    - none (默认)
    - hidden
    - dotted
      - 点线
    - solid
      - 实线
    - dashed
      - 虚线
    - double
    - groove
    - Inset
    - Outset
    - ridge
- 边框颜色
  - border-color
- 边框简写
  - border:边框宽度边框样式边框颜色
- 边框可以分别设置上下左右
- 表格的细线边框
  - 合并相邻的边框
    - border-collapse:collapse
- 表格合并单元格
  - border-collapse:collaspse;border-spacing:12px;
外边距
- 用于盒子和盒子中间
- margin属性的简写与padding一致
- 外边距的典型应用
  - 外边距可以让块级元素水平居中，但需要满足两个条件
    - 盒子模型指定了宽度
    - 左右的外边距设置为auto
    - 此方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align：center即可
- 外边距合并问题
  - 使用margin定义块级元素的崔志外边距时，可能会出现外边距的合并
    - 相邻块级元素垂直外边距的合并
      - 取较大值
      - 尽量给一个盒子添加外边距
    - 嵌套块元素垂直外边距的塌陷
      - 对于两个嵌套关系的块元素，父元素有上边距的同时子元素也有上边距，此时父元素塌陷较大的外边距值。
      - 解决方案
        
        为父元素定义一个上边框
        可以为父元素定义上内边距
        可以为父元素添加overflow：hidden；
内边距
- padding
  - padding-top
  - padding-right
  - padding-bottom
  - padding-left
- 简写
  - padding：5px
    - 上下左右都是5像素
  - padding：5px 10px;
    - 上下是5，左右10
  - padding:5px 10px 20px;
    - 上5 左右10 左右20
  - padding：1px 2px 3px 4px
    - 上1 右2，下3左4
- 内边距会撑大盒子
  - 应用：导航栏字数不一样多，用padding值会撑开盒子
- 内边距不会撑大盒子的情况
  - 不设置盒子的宽度
清除内外边距
- *{margin：padding：0；margin：0；}
- 注意：行内元素为了照顾兼容性，尽量值设置左右内外边距，不要设置上下内外边距，但是转换为块级元素或者行内块元素就可以了
实际内容

盒子有关属性

box-align:center;box-pack:center;主流浏览器均不支持
box-sizing 规定尺寸元素最终计算，不包含margin

CSS3渐变（菜鸟教程）

线相渐变

上面是0度
linear-gradient: 方向颜色1 颜色2

径向渐变

radial-gradient

使用多个颜色节点

圆角边框

语法

border-radius
- border-radius:length
- 圆形的设法
- 圆角矩形
  - 高度的一半

盒子阴影

box-shasow

h-shadow
- 水平阴影位置
v-shadow
- 垂直阴影位置
blur
- 模糊距离
spread
- 阴影尺寸
color
- 阴影颜色
inset/outside

默认是外阴影，但是不可以写outset,否则不生效

盒子阴影不占用空间，不会影响其他盒子排列

文字阴影(text-shadow)

属性

h-shadow
v-shadow
blur
color

浮动

CSS提供传统网页布局的三种方式

普通流（标准流）
浮动
定位

为什么要浮动

浮动可以改变多个块级元素的排列方式
浮动最典型的应用
- 可以让多个块级元素一行内排列显示
网页布局的第一准则
- 多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

什么是浮动

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或者另一个浮动的边缘

浮动的特性

浮动元素会脱离标准流
浮动盒子不再保留原先的位置
浮动元素一行内显示并且元顶部对齐
浮动的元素具有行内元素的特性
- 如果块级盒子没有设置宽度，默认宽度和父级一样宽，添加浮动过后，大小根据内容来决定
- 浮动的盒子中间是没有缝隙的，是紧挨在一起的
- 行内元素同理
浮动元素经常和标准流父级搭配使用
- 为了约束浮动位置，先试用标准流的父元素上下排位置，之后内部子元素采取浮动排列左右位置，复合网页布局的第一标准

清除浮动

为什么要清除浮动
- 父盒子不方便给高，子盒子浮动过后不占有位置
清除浮动本质
- 清除浮动造成的影响
- 如果父盒子有高度则不需要清除浮动
- 清除浮动过后，父盒子会根据浮动的子盒子自动化检测高度。
清除浮动的策略------（闭合浮动）
- 方法
  - 额外标签法
    - clear：both
    - 新增的盒子必须是块级元素，不能是行内元素
  - 给父级添加overflow属性
    - overflow：hidden/auto/scroll
      - 缺点：无法显示溢出代码
  - 给父级添加after伪元素
    - 代码
      
      .clearfix:after{
      content:“”,
      display:block;
      height:0;
      cleasr:both;
      visibility:hidd
      }
      .clearfix{
      *zoom:1;
      }
  - 父级添加双伪元素
    
    .learfix:before,.clearfix:after{
    content:“”;
    display:table;
    }
    .clearfix:after{
    clear:both;
    }
    .clearfix{
    *zoom:1;
    }