CSS 简介

CSS-层叠样式表( Cascading Style Sheets)，简称css
有时我们也会称之为CSS式表或级联样式表CSS是也是一种标记语言
CSS 主要用于设置HTML 页面中的文本内容(字体、大小、对齐方式等)图片的外形(宽高、边框样式边距等)以及版面的布局和外观显示样式
总结:html(结构)与css(样式)相分离(这个思想做项目会直接用到)

选择器

分类

选择器分为 基础选择器 和 复合选择器 两个大类

基础选择器

基础选择器是由单个选择器组成的

基础选择器又包括: 标签选择器 类选择器 id选择器 和 通配符选择器

  1. 类选择器

    (1) 被一个或者多个调用,开发常用

    (2) 命名要有意义,类名可以用’-‘,用英文为最佳

    (1) 多类名 :一个标签的调用多个类的方式

    <div class='name1 name2'> (name1为类名,加类时只要将类与类中间使 用空格隔开就行)
    ==> 可以使得标签产生 公共类 和 私有类
    ==> 公告类:公共属性
    ==> 私有类:自己特有的属性

    多类名可以使得一些类作为基础，另外一些类作为增加功能来引入。

  2. 标签选择器

    ( 1 ) 只能调用一次,别人切勿使用(唯一性)

    ( 2 ) 样式 # 定义,结构 id 使用(#是放在style里面或者css文件里面的，id是放在标签里面的)

  3. 通配符选择器

    ( 1 ) 样式符号: *

    ( 2 ) 默认选择所有的样式

属性

字体属性

属性名:属性值 简单说明 详细说明
font-family:’微软雅黑’ 控制文字字体 选择字体即可调用对应字体,多个字体就使用逗号分隔,英文兼容性好些
font-size:20px; 控制文字大小 -
font-weight: 500; 控制文字粗细 -
font-style: normal/italic; 字体标准/斜体样式 常用:将em i 标签改为标准风格,很少改为斜体的.
font : font-style font-weight font-size/line-height font-family; 统一操作文字属性 这是字体的复合属性,将多个属性糅合在一起
==>注意!字体复合属性不能随意颠倒各值的顺序!

文本属性(外观样式)

属性名:属性值 简单说明 详细说明
color:red ; 文本颜色 有预定义颜色:red,green,blue等;
十六进制颜色:#FFF,#000等;
RGB代码:rgb(0,0,0),rgb(255,255,255)等.
text-align: center; 文本对齐方式 居中/向左/向右对齐
(center/left/right)
text-decoration: none;(默认) 文本修饰 添加下划线(常用)/上划线/删除线等
underline/overline/line-through
text-index: 10px; 首行缩进 每个段落的第一行进行缩进(也就是<p>)
或者使用em作为单位em为当前元素字体的单位,2em表示俩字体
line-height:30px; 控制行高 行间距由上下间距和文本高度组成,也就是行高. 
==>测量行高的办法:从多行文本的第一行文本最下底量到第二行文本的最下底.

css的引入

1)内部样式表 >> <style></style>

<style>
    /* 选择器 {样式} */
    /* 某标签或者id/class {属性:值;属性:值;} */
    /* 选择器命名调用:
    1.标签名
    1.  .类选择器 
    2.  #id选择器
    
    举个例子
    */
</style>

2)行内样式表 >> <div style='color:red;'>
3)外部样式表 >> <line rel='stylesheet' href='css文件路径'> >> 吐血推荐

emmet语法

  1. 概念:快速构建网页

    在VScode里面安装完成插件后，使用英文的“!”打在空白“.html”文件当中，就会出现快速生成html骨架的提示。

  2. html其他生成功能概述:

    1. 标签的快速生成，也就是说，输入标签名自动提示相关的标签

    2. div*3 快速生成3个标签

    3. ul>li 快速创建父子集标签

    4. div+p 快速生成兄弟集标签

    5. .demo或者#laobel并按下tab 快速生成对应id/class标签

    6. $ 自增符号,从1开始.

    7. {} 给生成的标签内部写东西

  3. 属性与值的生成提示.

  4. 快速格式化代码:_shift+alt+f

复合选择器

概述 :
基本选择器的组合

复合选择器可以更准确、更高效的选择目标元素(标签)

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的

常用的复合选择器包括: 后代选择器、子选择器、并集选择器、伪类选择器等等

复合选择器说明

后代选择器(重要)

(1) 概念 ： 又称为包含选择器，可以选择 父元素里面子元素 。其写法就是把 外层标签 写在 前 面，内层标签写 在 后 面，中间用 空格 分隔。当标签发生嵌套时， 内层标签 就成为 外层标签 的 后代 。

(2) css写法 : 元素1 元素2 {属性:值;} ==> 元素1 是 元素2 的 父标签/元素 ,修改的是 元素2 的 属性

(3) 实例 : ul li {color:red;}

(4) 影响 ： 注意,这是选出所有标签为“li”的子元素!包括子子子选择器!

子选择器(亲儿子选择器)

(1) 概念 ：最近一级子元素,也就是亲儿子

(2) css写法 : ul>a {color:red;}

(3) 影响 ：变更只变更到子一级过,子子级或者其他级无法受到影响

并集选择器(重要)

(1) 概念 ：多组标签相同样式,任何形式都可以,以’,’连接. 一般是竖着写的.

(2) css写法 : #d1,#d2, ul li {color:red;}

伪类选择器

(1) 伪类选择器

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

伪类选择器书写最大的特点是用冒号(:)表示，比如:hover 、 :first-child。

因为伪类选择器很多，比如有 链接伪类__、__结构伪类 等，所以这里先给大家讲解常用的链接伪类选择器

(2) 各类伪类

<1> 链接伪类(声明顺序>lvha):(样式需要单独指定)

 a:link      选择所有未被访问的链接
 a:visited   选择所有已被访问的链接
 a:hover     选择鼠标指针位于其上的链接(鼠标经过)  (<常用>)
 a:active    选择活动链接(鼠标按下未弹起)(鼠标点击不松动)

<2> focus伪类选择器

  1. 概念: 用于选取获得焦点光标的表单元素(获得光标,一般为input)
  2. 格式: 下面是表单被选中时临时更换颜色
input:focus {
    background-color:yellow;
}

元素的显示模式

什么是元素显示模式

作用 :网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页

元素显示模式 :元素(标签)以 什么方式 进行 显示 ，比如<div>自己占一行，比如一行可以放多个<span>.

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

块元素与行内元素

块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素

块级元素的特点

(1) 比较霸道，自己独占一行。

(2) 高度，宽度、外边距以及内边距都可以控制

(3) 宽度默认是容器(父级宽度)的100%。

(4) 是一个容器及盒子，里面可以放行内或者块级元素

注意

文字类的元素内不能使用块级元素

标签<p>主要用于存放文字

此<p>里面不能放块级元素，特别是不能放<div>

同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del><s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素.

行内元素的特点 :

相邻行内元素在一行上，一行可以显示多个

高、宽直接设置是无效的

默认宽度就是它本身内容的宽度

行内元素只能容纳文本或其他行内元素

注意

链接里面不能再放链接

特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全 (display:block)

行内块元素

在行内元素中有几个特殊的标签它们同时具有块元素和行内元素的特点。<img/> <input/> <td>.
有些资料称它们为行内块元素。

行内块元素的特点

和相邻行内元素(行内块)在一行，但是他们之间会有空白间隙。一行可以显示多个(行内元素特点)。

默认宽度就是它本身内容的宽度(行内元素特点)

高度，行高、外边距以及内边距都可以控制( 块级元素特点)。

元素显示模式转换(display)

转换为 行内 元素: display: inline ;

转换为 块 元素: display: block ;

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

css背景样式

背景样式汇总（所学的）

属性名:属性值 简单说明 详细说明
background-color: red 背景色 transparent
(默认透明色)
特定色(red,blue…)
rgb(0,0,0)
16进制色#000
bacground-img: none 背景图片 none或url(图片地址);
常常作为小图片控件
background-repeat : repeat 背景平铺 repeat(平铺) no-repeat(不平铺) )
repeat-x(仅沿x轴平铺 ) repeat-y(仅沿y轴平铺)
background-position: x y; 背景图片位置 x y 可以为长度单位(px等)
也可以为方位名词)
(left right bottom center))
单个方位名词时默认其他方位居中)
精确坐标第一个一定是x)
精确单位与单位名词可以混合使用
background-attachment: fixed; 背景图像固定 scroll(滚动),fixed(固定)
background-color: rgba(0,0,0,0.3) 半透明效果背景色 通过控制rgb后面的小数设置透明度,取值范围0~1

复合背景样式

background: 背景色 背景图地址 背景平铺 背景滚动/固定 背景图位置;
注意！这个复合样式可以随意调换位置！

CSS三大特性(重要★☾★☽★)

层叠性(覆盖)

概念 

样式冲突   就近原则,哪个距离被修饰的结构近就用哪个修饰
样式不冲突 不会层叠

继承性

概念

继承父元素样式   子承父业

特殊情况:行高继承性

属性font-size: 14px/1.5; → 意思是当前元素字体大小的1.5倍大的行高.

(也就是说,继承过来的行高取决于字体大小和倍数的乘积…)

优先级

概念
选择器权重

选择器 选择器权重
继承或者 * 0,0,0,0
元素选择器 0,0,0,1
类选择器伪类选择器 0,0,1,0
ID选择器 0,1,0,0
行内样式 style=""(例如<div style="" >) 1,0,0,0
!important 重要的 无穷大

权重注意点 :

权重的大小是不变的,权重的比较类似于二进制.

优先级注意点 :

1.权重是有4组数字组成但是 不会有进位!

2.可以理解为 类选择器 永远大于 元素选择器 , id选择器 永远大于 类选择器,以此类推

3.等级判断 从左向右 ，如果某一位 数值相同 ，则 判断下一位 数值

4.可以简单记忆法: 通配符和继承 权重为0 ,标签选择器为1,类(伪类)选择器为10,id选择器100,行内样式表为1000,!important无穷大

5.继承的权重是0 ,如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。
==>也就是说,从父亲继承的权重是0,单独列出子元素指定属性时,会覆盖继承的权重

权重叠加

复合选择器权重叠加问题
ul li {...} 
li {}  ==>两者同时操作li标签,但由于权重叠加,必须计算: 
ul li 的权重:0,0,0,1 + 0,0,0,1 = 0,0,0,2
li1的权重: 0,0,0,1  ==>小于ul li的权重,所以继承ul li的属性

盒子模型

网页布局3大核心

盒子模型/浮动/定位

看透网页布局的本质

网页布局过程
1.先准备好相关的网页元素，网页元素基本都是盒子Box
2.利用CSS设置好盒子样式，然后摆放到相应位置
3.往盒子里面装内容
网页布局的核心本质: 利用CSS摆盒子.

盒子模型概念 :就是把HTML页面中的布局元素看作是一个 矩形的盒子 ，也就是一个盛装内容的 容器

CSS盒子模型 本质上是一个盒子，封装周围的HTML元素，它包括: 边框(border) 、外边距(margin) 、内边距(padding) 和 实际内容(content)

border边框样式表

属性名 具体样式 相关说明 属性值
border border-width 边框的粗细 单位可以是px等
border border-color 边框的颜色 颜色值可以是red，rgb或者#
border border-style 边框的样式 none(无边框) hidden(隐藏边框) dottend(点线 )
dashed(虚线) solid(实线) double(双线)
groove(3D凹槽) ridge(棱形) inset(3d凹边)
outset(3d凸边)
注意 :测量时边框会影响盒子的大小
border
border-left
border-right
border-top
border-bottom		 具体位置上的边框 样式为复合样式，囊括前面三种。

margin外边距控制

  1. css格式 : margin: top right bottom left这个是复合写法,可以写成margin-top:12px;的格式;
  2. 影响 :盒子与盒子间的距离
  3. 另外一种用途 :设置水平居中 >>> margin:auto; >>> 前提:盒子有宽度
  4. 外边距塌陷问题 :
当父元素与子元素(嵌套)同时设置外边距时,父元素会塌陷较大外边距的值
解决办法:(可以定义透明边框)
    ① 给父元素定义上边框
    ② 给父元素定义上内边距
    ③ 给父元素添加overflow:hidden  ★★★★★★

padding内边距控制

  1. css格式: padding: top right bottom left 和margin一样，这是复合写法，也可以写成padding-top:12px;的格式
  2. 影响盒子实际大小 ==> 盒子宽高减去内边距
  3. 其他情况 : 盒子没有指定宽高 >> 不会撑开盒子

content

注意 :行内元素为了照顾兼容性，尽量只设置 左右内外边距 ，不要 设置 上下内外边距 。但是转换为块级和行内块元素就可以了.

Pink老师总结

1.布局为啥用不同盒子,我只想用div ?

标签都是有语义的,合理的地方用合理的标签。比如产品标题就用h，大量文字段落就用p (个人：后面做项目时布局确实如此，有语意的标签读起来更好理解)

2.为啥用辣么多类名 ?

类名就是给每个盒子起了一个名字,可以更好的找到这个盒子选取盒子更容易 后期维护也方便

3.到底用 margin还是 padding ?

大部分情况两个可以混用，两者各有优缺点，但是根据实际情况，总是有更简单的方法实现

css3后增样式

属性 名称 用途 相关说明
border-radiues:length 圆角边框 可以做圆形 半径为length的圆与边框的交集
角顺序: 左上 右上 右下 左下
length 的单位不限,可以用百分比
box-shadow:h-shadow v-shadow blur spread color inset; 盒子阴影 - 水平位置(必须) 垂直位置(必须) 模糊距离 阴影尺寸 阴影颜色 外部阴影转内部(默认outset,此单词不可写)
text-shadow:h-shadow v-shadow blur color; 文字阴影 - 水平位置(必须) 垂直位置(必须) 模糊距离 阴影颜色