前端学习——CSS

Css层叠样式表 (Cascading Style sheets) Css样式表 级联样式表

Css语法规范:选择器及一条或多条声明 <head>中添加<style>

Css选择器 基础选择器 复合选择器

基础选择器

  1. 标签选择器(标签名) 把某一类标签全部选择出来 
    p {
    color: green;
}
  2. 类选择器(class类) 口诀:样式点定义,结构(class)类调用.一个或多个,开发最常用.  不能用标签名. 
    .red {
    color: red;
}

    多类名:一个标签可以多个类名 类名间用空格隔开.使用场景:将标签元素相同的样式放在一个类里,调用公共类和自己独特的类.

  3. id选择器  口诀:样式#定义 结构id调用 只能调用一次 别人切勿使用 
    #red {
    color: red;
}
  4.  通配符选择器 * 表示选择页面中所用的元素(标签)

一般Css 调用class   JavaScript调用id

字体属性

属性 表示 注意点
font-size 字号 通常单位是px,一定要跟上单位  可以给body指定整个页面文字大小
font-family 字体 实际工作中所需字体 (Microsoft YaHei "微软雅黑")
font-weight 字体粗细 bold(加粗)是700  不加粗是normal或数字400  数字不跟单位
font-style 字体样式 italic(倾斜) 不倾斜为normal 工作中最常用normal
font 字体属性连写 字体属性连写有顺序 不能随意更换 其中 font-size和font-family必须同时出现

文本属性

属性 表示 注意点
color 文本颜色 通常使用十六进制  #ff0000
text-align 文本对齐方式 设定文本水平对齐方式 left center right
text-indent 文本缩进 通常用于段落首行缩进2个字的距离 text-indent: 2em
text-decoration 文本修饰 下划线underline   上划线overline  删除线line-through   none默认(链接a中删除下划线)
line-height 行高 控制行与行之间的距离  行间距包含上间距 文本高度 下间距

 Css引入方式 

1、行内样式表 （style）本是标签的属性

2、内部样式表 <style> </style>  一般写在<head></head>中 

3、外部样式表 <link rel="stylesheet" href="">

Emmet语法——html

  1. 标签名+tab键
  2. 生成多个相同标签 div*3
  3. 父子级关系标签 > 如:ul>li
  4. 兄弟级关系 +  如div+p
  5. 生成带有类名或id名 直接写 .demo 或#two  tab键    默认为div  可其他标签.类名  标签#id名
  6. 生成的div类名有顺序 用自增符 $
  7. 如果想要在生成标签内部写内容可以用{}表示

Css基本采取简写形式 如:w200 + tab 生成 width: 200px;  单词首写字母

Css复合选择器

  1. 后代选择器 元素1 元素2 {样式声明} 可以多层 只要是元素1的后代即可  注:元素1和元素2中间加空格
  2. 子选择器 最近一级子元素 元素1>元素2 {样式声明} 选择元素1里面所有直接后代(子元素)元素2
  3. 并集选择器 可选择多组标签 同时为他们定义相同的样式 元素1,元素2{样式声明} 元素1和元素2任何形式都可以 一般竖着写
  4. 伪类选择器 用于向某些选择添加特殊的效果 或选择第n个元素   最大特点：用冒号(:)表示 如 :hover :first-child
    1. 链接伪类选择器 注意事项:顺序LVHA :link :visted :hover :active  链接需要单独指定样式.                                                              通常写法: a{}所有的链接状态 a:hover{} 鼠标经过的状态
      a:link 选择所有未被访问过的链接
      a:visited 选择所有被访问过的链接
      a:hover 鼠标指针位于其上的链接
      a:active

      活动链接(鼠标按下未弹起的链接)
    2. focus伪类选择器 用于选取获得焦点的表单元素(焦点就是光标) 一般情况下<input>类表单元素才能获取

元素显示模式

  1. 块元素 <h1>~<h6> <p> <div> <ul> <ol> <li>等 
    1. 独占一行
    2. 高度 宽度 外边距以及内边距都可以控制 
    3. 宽度默认是容器(文本宽度)的100%
    4. 块元素是一个容器及盒子, 里面可以放行内或则块元素 容器可以包含任何标签
    5. 文字类中不能再放块元素 <p> <h1>~<h6>中不能放<div>
  2. 行内元素 <a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span>
    1. 相邻行内元素在一行上,一行显示多个
    2. 高 宽直接设置无效
    3. 默认宽度为其本身内容的宽度
    4. 行内元素只能容纳文本或其他行内元素
    5. 链接里不能放链接 <a>里可以放块级元素 <a>转换一下块级模式最安全
  3. 行内块元素 <img /> <input /> <td>
    1. 一行可显示多个
    2. 默认宽度就是其本身内容的宽度
    3. 高度 行高 外边距 内边距都可以控制

元素显示模式转换 一个模式的元素需要另外一个模式的特性

display:block  转换成块元素

display:inline 转换成行内元素

display:inline-block 转换成行内块

tips:若要将单行文字垂直居中,让文字的行高等于盒子的高度即可

Css的背景

属性 作用 值
background-color 背景颜色 预定义的颜色值/十六进制/RGB代码 transparent | color
background-image 背景图片 url(图片路径)
background-repeat 是否平铺 repeat/no-repeat/repeat-x/repeat-y
background-position 背景位置

length/position 分别是x和y的坐标

方位名称:top | center | bottom|left|right

精确单位:若为精确单位,第一个肯定为x坐标,第二个为y的坐标

若只指定一个数值 则该数值是x坐标 另一个默认垂直居中

混合单位:第一个值是x坐标 第二个值是y坐标
background-attachment 背景附着 scroll(背景滚动) /fixed(背景固定)
背景简写 书写更简单 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
背景色半透明 背景颜色半透明 background:rgba(0,0,0,0.3); 后面必须是四个值

tips:

  1. 可将图片设置成区块的背景图片 便以控制其位置
  2. 针对超大背景图片,要将其居中显示 可用 background-position: center top;

Css三大特性

  1. 层叠性 样式冲突时,采用就近原则
  2. 继承性 子标签会继承父标签的某些样式 如文本颜色 字号 行高  text-  font-  line-  color-
    • 行高的继承 body{font: 12px/1.5 Microsoft YaHei} 此处将body内所有元素其行高设置成其文字大小的1.5倍
  3. 优先级
    1. 当同一元素指定多个选择器
    2. 选择器相同,执行层叠性
    3. 选择性不同,根据选择器权重执行

选择器权重

选择器 选择器权重
继承或者* 0,0,0,0
元素选择器 0,0,0,1
类选择器,伪选择器 0,0,1,0
ID选择器 0,1,0,0
行内样式style="" 1,0,0,0
!important 无穷大

 权重的叠加 如果是复合选择器，则会有权重的叠加

tips：权重会叠加，但是没有进位

盒子模型

网页布局过程

  1. 准备好相关的网页元素，基本都为盒子Box
  2. 利用CSS设置好盒子样式，然后将其摆放在相应的位置
  3. 往盒子里装内容

盒子模型的组成：边框(border) 外边距(margin) 内边距(padding) 和 实际内容(content)

边框 border 

border-width 定义边框的粗细 单位是px
border-style 定义边框的样式 soild实线 dashed虚线 dotted点线
border-color 定义边框的颜色  

边框简写 border: 1px soild red; 没有顺序

边框分开写法 border-top | bottom | left | right: 5px soild pink;

border-collapse: collapse; 合并相邻单元格边框

边框会影响盒子实际大小,加上边框会变大

内边距 padding  padding-left   padding-right   padding-top   padding-bottom

内边距简写:

padding: 5px; 上下左右5px

padding: 5px 10px; 上下5px 左右10px

padding: 5px 10px 20px; 上5px 左右10px 下20px

padding:5px 10px 20px 30px; 上5px 右10px 下20px 右30px 顺时针

padding影响盒子的实际大小 加上内边距变大

如果盒子本身没有指定width/height，则此时padding不会撑开盒子大小

外边距 margin 设置外边距 控制盒子与盒子之间的距离

margin-left   margin-right   margin-top   margin-bottom

margin简写和padding一样 

tips：margin：0 auto；

外边距可以让块级盒子水平居中，必须满足1、盒子必须指定宽度   2、盒子的左右的外边距都设为auto

外边距合并问题  使用margin定义块元素的垂直外边距时，可能会出现外边距的合并

1、相邻块元素垂直外边距的合并  解决方法：尽量只给一个盒子添加margin

2、嵌套块元素垂直外边距的塌陷  嵌套关系的块元素 父元素和子元素都有上外边框，此时父元素会塌陷较大的外边距值，

解决方法：1、为父元素定义上边框  2、为父元素定义上内边框   3、为父元素添加overflow：hidden；

消除内外边距：

*{
    padding: 0;
    margin: 0;
    }

 行内元素为照顾兼容性，尽量只设置左右内外边距，不要设置上下内边距，但是转换成块级和行内块元素即可。

PS：Ctrll+R 打开标尺 单位改成像素

去掉<li>前面讲的项目符号（小圆点）语法 list-style: none;

圆角边框 border-radius  数值或者百分比

圆形:  在正方形盒子中, border-radius: 50%;  当后面为四个值时,对应于 坐上  右上  右下  左下  或者用border-top-left-radius等

盒子阴影 box-shadow :h-shadow h-shadow blur spread color inset;

值 描述
h-shadow 必须,水平阴影的位置 允许负值
h-shadow 必须,垂直阴影的位置 允许负值
blur 可选 模糊距离
spread 可选 阴影尺寸
color 可选 阴影的颜色
inset 可选 将外部阴影(outset)改为内部阴影 默认自带outset

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

文字阴影 text-shadow:h-shadow h-shadow blur color;

值 描述
h-shadow 必须,水平阴影的位置 允许负值
h-shadow 必须,垂直阴影的位置 允许负值
blur 可选 模糊距离
color 可选 阴影的颜色

传统网页布局的三种方式：普通流 浮动 定位

网页布局第一准则:  多个块级元素纵向排列使用标准流,多个块级元素横向排列浮动

网页布局第二准则:先设置盒子大小,再设置盒子位置

浮动（float）

浮动: 可以让多个块级元素一行内排列显示

语法:   选择器 { float:属性值}  属性值: none  left  right

浮动特性

  1. 浮动元素会脱离标准流  (脱离标准流的控制,移动到指定的位置)  俗称托标     浮动的盒子不在保留原先的位置
  2. 如果多个盒子都设置了浮动,则它们会按照属性值在一行内显示并且顶端对其排列
    tips:浮动元素是相互贴靠在一起的,不会有缝隙  如果父级宽度装不下这些浮动的盒子,多出来的盒子会另起一行对齐
  3. 互动元素会变为行内块元素

浮动元素经常和标准流父级搭配使用:

先用标准流父元素排列上下位置,之后内部子元素采用浮动排列左右位置,符合网页布局第一准则

浮动布局注意点:

  1. 先父元素标准流,后子元素浮动
  2. 若一个兄弟浮动,其余也跟着设置浮动
  3. 浮动的盒子只会影响后面的标准流,不会影响前面的标准流

清除浮动的本质: 清除浮动元素造成的影响   如果父盒子本身有高度,则不需要清除浮动  清除浮动后,父级元素就会根据浮动的盒子自动控制高度

语法: 选择器: {clear: 属性值;}  属性值:  left  right  both  

清除浮动的策略:闭合浮动

清除浮动的方法

  1. 额外标签法 W3C推荐   在浮动元素的末尾添加一个空标签 如 < div style="clear: both"></div> 或其他标签 <br />   要求新增的空标签必须是块级元素   
  2. 父级添加overflow属性   属性值hidden  auto  scroll    缺点:无法显示溢出部分
  3. :after伪元素法 
    .clearfix:after{
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix:{
    /* IE6  IE7*/
    *zoom:1;
}
  4. 双伪元素 
    .clearfix:before,
.clearfix:after{
    content:"";
    display:table;
}
.clearfix:after{
    clear:both;
}
.clearfix{
    *zoom:1;
}
常见的图片格式
  1. jpg图片格式，对色彩的信息保留好,清晰,颜色较多,产品类图片经常使用jpg格式
  2. gif图片格式 实际经常用于一些图片小动画效果  透明背景 动画效果
  3. png 结合jpg和gif的特点 如果想要切成背景透明的图片 选择png格式
  4. psd 可以直接从上面复制文字,获取图片,测量大小和距离

PS切图

  1. 图层切图 右击图层,导出为PNG   很多情况下需要将图层合并后导出
  2. 切片切图  使用切片工具
  3. PS插件切图 cutterman插件

CSS属性书写顺序

  1. 布局定位属性:display/position/float/clear/visibility/overflow
  2. 自身属性:width/height/margin/padding/border/background
  3. 文本属性:color/font/text-decoration/text-align/vertical-align/white-space/break-word
  4. 其他属性(CSS3):content/cursor/border-radius/box-shadow/text-shadow/background:liner-gradient.....

页面布局结构整体思路

  1. 必须确定页面的版心(可视区)
  2. 分析页面中的行模块,以及每个行模块中的列模块,页面布局第一准则
  3. 一行中的列模块经常浮动布局,先确定每个列的大小,之后确定列的位置,页面布局第二准则
  4. 制作HTML结构,结构永远最重要
  5. 先理清楚布局结构

学成在线案例中的知识点

  1. 实际开发中，不会直接使用链接a，而是用li包含链接(li + a) 的做法
  2. 行内块元素之间会有缝隙
  3. button会有默认边框
  4. 可以专门写一个版心的类,当所需内容需要时,添加此类
  5. 浮动的盒子不会有外边距合并的问题
  6. 行高会继承,所以给父元素添加行高可以实现内容的垂直居中
  7. vscode中 ctrl+g 实现内容的快速跳转
  8. 将父元素的宽度变大,从而使得一行中能包含全部子元素,而不使最后一个掉到下一行
  9. 子元素浮动,父元素没加高度,则最终其高度为0,所以要清除浮动

定位:  将盒子固定在某一个位置上   定位=定位模式(定位方式) + 边偏移(最终位置)

浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子

定位则是可以让盒子自由在某个盒子内移动位置后者固定在屏幕中某个位置,并且可以压住其他盒子

定位模式: position  static静态定位   relative  相对定位   absolute 绝对定位   fixed固定定位

边偏移:  top   bottom    left   right   相对与其父元素个边线的距离

  1. 静态定位(static)  默认定位方式   标准流  无位偏移
  2. 绝对定位(relative) 元素在移动位置时,是相对于它原来的位置 
    1. 相对于其原来的位置移动
    2. 原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它(不脱标,继续保留原本位置)
  3. 绝对定位(absolute)  元素在移动时,相对于祖先元素
    1. 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准进行定位
    2. 如果祖先元素有定位(相对 绝对 固定定位,则以最近一级的有定位的祖先元素为参考位置
    3. 绝对定位脱离原来的位置,脱标
  4. 固定定位(fixed) 元素固定于浏览器可视区的位置,主要使用场景,可以在浏览器页面滚动时元素的位置不会改变
    1. 浏览器的可视窗口为参照点移动元素,跟父元素没有任何关系,不随滚条滚动
    2. 固定定位不再占有原先的位置,脱标
  5. 粘性定位(sticky) 兼容性较差
    1. 以浏览器的可视窗口为参照点移动元素
    2. 粘性定位会占有原先的位置
    3. 必须添加top left right bottom中的一个才嫩生效

子绝父相

  1. 子级绝对定位,不会占有位置,可以放在各自里面的任何位置,不会影响其他兄弟盒子
  2. 父盒子需要添加定位限制盒子在父盒子内显示,父元素需要占有位置,因此是相对定位,子盒子不需要占有位置,则是绝对定位
定位模式 是否脱标 移动位置 是否常用
static静态定位 否 不能使用边偏移 很少
relative相对定位 否(占有位置) 相对于自身位置偏移 常用
absolute绝对定位 是(不占有位置) 带有定位的父级 常用
fixed固定定位 是(不占有位置) 浏览器可视区 常用
sticky粘性定位 否(占有位置) 浏览器可视区 当前阶段少

定位叠放次序 z-index   使用定位布局时,可能会出现盒子重叠的情况,使用z-index 来控制盒子的前后顺序(x轴)

数值可以是正数 负数 0 默认为auto  如果属性值相同,按照书写顺序后来居上,数值越大,越上,  数值后没有单位,只有定位的盒子才有z-index属性

定位拓展

  1. 绝对定位的盒子的居中    加了绝对定位的盒子不能通过  margin: 0 auto; 水平居中 同理也可以实现垂直居中 
    .box{
    position: absolute;
    left:50%;
    margin-left:-100px;//盒子宽度的一半
    width:200px;
}
  2. 定位特殊特性
    1. 行内元素添加绝对或者固定定位,可直接设置高度和宽度
    2. 块级元素添加绝对或者固定定位,如果不给宽度或高度,默认大小是内容的大小
  3. 脱标的盒子不会触发外边距塌陷  浮动元素,绝对定位和固定定位,不会触发外边距合并问题
  4. 绝对定位(固定定位)会完全压住盒子  浮动元素只会压住下面标准流的盒子,不会压住文字(图片)  因此可以设置文字环绕效果(float)

当盒子中插入图片时，将图片的大小固定成盒子大小

页面布局总结      大部分html标签是盒子    通过CSS浮动,定位进行排列

  1. 标准流  可以让盒子上下左右排列,垂直块级盒子显示
  2. 浮动  多个块级盒子一行显示或左右对齐盒子,多个块级盒子水平显示
  3. 定位,有层叠概念  如果元素自由在某个盒子内移动就用定位布局

元素的显示与隐藏  例如网站中的广告   本质:让一个元素在页面中隐藏或者显示出来

display    display: none;  隐藏元素  display: block;  除了转换为块级元素外,还有显示元素的意思   元素并没有删除  display: none;  隐藏元素后,不再占有原来的位置  搭配Js

visibility   visibility: visible;元素可视化   visibility: hidden; 元素隐藏    visibility 隐藏元素后,继续占有原来的位置

overflow  溢出   指定了如果内容溢出元素的框时,其会发生什么   默认值为 visible   hidden多出的内容隐藏    scroll 溢出部分显示滚动条   auto  在需要的时候显示滚动条  超出显示,不超出不显示

tips:有定位的盒子,慎用overflow: hidden;   因为它会隐藏多余部分

.box:hover .mass{}  //经过box类标签时,mass类的样式的改变

精灵图 为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度

核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要请求一次即可

sprites的使用   移动背景图片的位置   background-position: x y;  一般为负值   使用精灵图需要精准测量位置

字体图标 iconfont  展示是图标,本质属于字体

优点:

  1. 轻量级
  2. 灵活性  本质是文字,可以随意改变颜色,产生阴影,透明效果,旋转
  3. 兼容性好

但是不能替代精灵技术

结构和样式比较简单的小图标,就用字体图标   复杂的就用精灵图

字体图标下载  https://icomoon.io    https://www.iconfont.cn/

字体图标的引入

  1. 下载包中fonts文件放入网页文件根目录下
  2. 字体声明(在CSS样式中全局声明字体)
  3. html标签内添加小图标 
  4. 给标签添加CSS,指定字体

字体图标的追加   压缩包中selection.json  重新上传,进行更改

CSS三角的做法:

.box{
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    border: 10px solid transparent;
    border-top-color: pink;
}

CSS用户界面样式

  1. 更改用户的鼠标样式 cursor   默认:default  小手:pointer  移动:move  文本:text  禁止:not-allowed
  2. 轮廓线  outline   input {outline:none;} 取消表单轮廓
  3. 防止拖曳文本域  resize  textarea{ resize:none;}文本域写到一行

vertical-align属性应用   使用场景: 经常用于设置图片或者表单(行内块元素)和文字垂直对齐  只针对于行内元素或者行内块元素有效

vertical-align: baseline(默认) | top(把元素顶端与行中最高元素的顶端对齐)  |  middle(把元素放置在父元素的中部)  |  bottom(把元素的顶端与行中最低的元素的顶端对齐)

解决定策的白色缝隙   行内块元素与文字基线对齐:  推荐:   1  添加  vertical-align:middle|top|bottom;  2  将图片转化成块级元素  display:block;

溢出的文字省略号显示

1  单行文本溢出显示省略号

/*1·先强制一行内显示文本*/
white-space: nowrap;
默认normal 自动换行）
/*2·超出的部分隐藏*/
overflow: hidden;
/*3.文字用省略号替代超出的部分*/
text-overflow: ellipsis;

2 多行文本溢出显示省略号    有较大兼容性问题  更推荐让后台人员来做这个效果

常用布局技巧

1 margin负值运用

  1. 解决并排盒子之间的边框宽度加倍问题。 原理：让每个盒子压住前面的盒子，边框叠加。   相对定位会压住其他标准流和浮动

  2. 鼠标经过某个盒子时,边框颜色 
    /*如果盒子没有定位，则鼠标经过添加相对定位*/
ul li:hover {
  position: relative;
  border: 1px solid orange;
}
/*若li都有定位，则使用 z-index 提高层级*/
ul li {
  z-index: 1;
  border: 1px solid orange;
}

2 文字围绕浮动元素  浮动元素不会遮挡文字

3 行内块巧妙运用  

4 CSS三角巧妙运用 

.box{
    width: 0;
    height: 0;
    border-color: transparent skyblue blue green;
    border-style: soild;
    border-width: 100px 50px 0 0;
}

CSS初始化  照顾兼容性

\5B8B\4F53  宋体

 

posted @ 2022-04-02 12:27  Li_WenWu  阅读(45)  评论(0)    收藏  举报