锐客网

  1. 首页 > 睿知 > it技术 > >

前端|CSS【层叠样式表Cascading Style Sheets】

前端cssweb

目录
一、布局与选择器
1.ID选择器
2.class选择器/类选择器
3.通用选择器/通用符
4.群组(分组)选择器
5.后代(嵌套)选择器
6.伪类选择器--LVHA
7.CSS优先级
【前端|CSS【层叠样式表Cascading Style Sheets】】二.css属性
1.文本属性
2.列表属性
3.背景属性
4.浮动属性
三.盒子模型[Box Model]
1.内边距Padding
2.边框Border
3.外边距Margin
四.PS基本应用
1.图片放大和缩小
2.图片的移动
3.调整标尺
4.测量图片大小
5.吸取颜色
6.截图
五.溢出属性
1.容器的溢出overflow
2.空余空间white-space
3.省略号显示text-overflow
六.元素显示类型
七.定位Position
1.子绝A父相R
2.行内元素设计成块元素？
3.定位和浮动区别
4.锚点
5.CSS精灵图/雪碧图
八.宽高自适应
1.窗口自适应
2.浮动元素的高度自适应
3.伪元素
一、布局与选择器 如何插入css样式？

  • 外部样式表(External style sheet)
  • 内部样式表(Internal style sheet)
  • 内联样式(Inline style)
外部样式表(External style sheet)
第一步：创建对象
第二步：新建一个css文件
第三步：利用Link/@import引入文件
Eg:
”text/css” >@importurl(”css文件路径”);
拓展：link和@import区别？
  1. link 属于XHTML标签，但后者是CSS提供的一种方式
  2. 加载顺序不同：前者页面随着link引用的css文件同时被加载；后者是等到页面全部被下载完再加载。
内部样式表(Internal style sheet)
hr {color:sienna; } p {margin-left:20px; } body {background-image:url("images/back40.gif"); }

内联样式(Inline style)
这是一个段落。

！Important>行内>内部>外部=====相同权重的选择符样式遵循就近原则
1.ID选择器 语法：#id名{属性:属性值; }
注意：起名时要用英文，不能是关键字（所有的标记和属性），不能以数字开头。
一个ID只能对应文档中一个具体的元素对象，即唯一性。
2.class选择器/类选择器 语法：.class名{属性:属性值;
注意：类名的第一个字符不能使用数字
3.通用选择器/通用符 语法：*{属性:属性值; }
拓展：*{margin:0; padding:0; }代表清除所有元素的默认边距值和填充值
4.群组(分组)选择器 语法：选择符1，选择符2，选择符3{属性:属性值; }
5.后代(嵌套)选择器 语法：选择符1选择符2{属性:属性值; }比如.listli{background:red; }
6.伪类选择器--LVHA
  • a:link - 正常，未访问过的链接
  • a:visited - 用户已访问过的链接
  • a:hover - 当用户鼠标放在链接上时
  • a:active - 链接被点击的那一刻
7.CSS优先级 行内样式【style=””权重值：1000】>ID选择器【#id权重值：100】>类选择器【.class权重值：10】>标签（元素）选择器【div{}权重值：1】>通用选择器【*权重值：0】
1 类型(元素)选择器 0001
2 (类)class选择器 0010
3 id选择器 0100
4 包含选择器 为包含选择符的权重之和
5 内联样式 1000
6 ！important 10000
解析规则：发生冲突=高权重覆盖低权重；相同权重下，遵循就近原则
二.css属性 更多详细属性应用可以参考菜鸟教程菜鸟教程 - 学的不仅是技术，更是梦想！
1.文本属性 前端|CSS【层叠样式表Cascading Style Sheets】
文章图片


2.列表属性 前端|CSS【层叠样式表Cascading Style Sheets】
文章图片

3.背景属性 前端|CSS【层叠样式表Cascading Style Sheets】
文章图片

拓展：background-position有两种写法
写法一：方位名词【有九个方位：left、right、center、top、bottom】
写法二：坐标【向右为X轴正；向下为Y轴正；eg---background-position:100px 100px; 】
background-size:100px 40px/cover/contain
cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
4.浮动属性 前端|CSS【层叠样式表Cascading Style Sheets】
文章图片

1.清除浮动：浮动元素不会覆盖文字内容、图片内容、表单元素。
写固定高度
清除浮动clear:none/left/right/both
当前浮动元素后面补一个盒子，不设置宽高，clear:both
Overfiow:hidden,让浮动元素计算高度
三.盒子模型[Box Model] 1.内边距Padding Padding：10px 20px 30px 40px,背景已经蔓延道内边距
Padding-方向：top bottom left right可以设置单一方向
1个值：4个方向一样
2个值：上下，左右
3个值：上 左右 下
4个值：上 右 下左 （顺时针）
2.边框Border Border:10pxdottedtransparen(透明色)t; 背景色也能蔓延到边框
样式：solid(实线)double(双实线)dashed(段实线)dotted(点实线)
3.外边距Margin Margin--方向：4个方向，背景色没有蔓延，支持负值
屏幕居中？Margin:0 auto; 横向居中
特性问题
兄弟关系：两个盒子垂直外边距与水平边距问题
---垂直方向，外边距取最大值
---水平方向，外边距会进行合并处理
父子关系：给子加外边距，但作用于父身上了，怎末解决？
（1）子margin-top===>父的padding-top,注意高度计算
（2）给父盒子设置边框，在子的margin-top基础上
（3）加浮动：float:left;
（4）Overflow:hidden.BFC
拓展：【常见图片格式的区别】
（1）gif:支持动画、只有全透明和不透明两种模式、只有256种颜色
（2）jpg:采用有损压缩算法、体积较小、不支持透明和动画
（3）png:采用无损压缩算法、体积较小、不支持动画，支持背景透明
四.PS基本应用 PS====图片处理软件(美工来作图，前端来测量、吸取颜色、切图)
拿到设计稿后：使用PS打开
图片上面右键=====打开方式或者PS里<文件>====<打开>
1.图片放大和缩小 Ctrl++
Ctrl+-
Alt+滚动
2.图片的移动 按住空格，鼠标变为小手，拖动图片
3.调整标尺 Ctrl+R作用：拖动参考线方便测量
视图里找到标尺，把对勾勾选上
4.测量图片大小 使用矩形选框工具
///如何查看数据大小(窗口-------信息面板===wh)
///如何修改测量单位：
在标尺上面右键选取修改单位====像素
Ctrl+d=====取消选区，选完后，想调整大小，可以右键--->变换选区
5.吸取颜色 使用吸管工具，点击左下角的背景色，会右弹窗，右键#十六进制颜色值可以复制使用
6.截图 ///使用快捷键截图===每次只能截图一个
使用选框工具选取截取区域
Ctrl+C======Ctrl+N=====回车====Ctrl+V===Ctrl+S
///切片工具（裁剪工具进行切换）
使用切片工具框选要留住的区域，点击文件，存储为web所用格式
弹窗====格式：仅限图像，切片：所有用户切片
五.溢出属性 1.容器的溢出overflow 前端|CSS【层叠样式表Cascading Style Sheets】
文章图片

2.空余空间white-space
White-space:normal/nowrap/pre/pre-wrap/pre-line/inherit该属性用来设置如何处理元素内的空白
Normal:默认值，空白会被浏览器忽略
Nowrap:文本不会换行，文本会在同一行上继续，直到遇到
为止
Pre:显示空格，回车，不换行
pre-wrap:显示空格，回车，换行
pre-line:显示回车，不显示空格，换行
3.省略号显示text-overflow text-overflow:clip/ellipsis;
Clip:默认值，不显示省略号
Ellipsis:显示省略号
当单行文本溢出显示省略号需要同时设置一下声明；
  1. 定义容器宽度：width:200px;
  2. 强制文本在一行内显示white-space:nowrap;
  3. 溢出内容为隐藏overflow:hidden
  4. 溢出文本显示省略号text-overflow:ellipsis
六.元素显示类型 前端|CSS【层叠样式表Cascading Style Sheets】
文章图片

span行内元素，只能设置边距的左右边距，不能设置上下边距
p标签放文本可以，不能放块级元素
块元素
Display:block; 把内联元素【只需要必要的宽度，不强制换行】作为块元素：
Display:list-item;
Display:inline; 把块元素【是一个元素，占用了全部宽度】显示为内联元素：
Display:inline-block;
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。
七.定位Position 前端|CSS【层叠样式表Cascading Style Sheets】
文章图片

其余属性：见菜鸟教程
clip：剪辑一个绝对定位的元素
cursor：显示光标移动到指定的类型
z-index：设置元素的堆叠顺序
1.子绝A父相R 当绝对定位中的父子关系存在覆盖层级关系时，给子盒子设置z-index:负值即可
当绝对定位中的兄弟关系存在覆盖层级关系时，比较z-index大小
拓展：当有两个div盒子存在覆盖现象时，在设置position:relative的情况下，z-index:值(可为负)越大，层级越大，越靠上显示
2.行内元素设计成块元素？ Display:block; //
Position:absolute//
Float:left//
3.定位和浮动区别
Float:left:半脱离，文字环绕效果
Position:absolute：全脱离，不会出现文字环绕效果，会覆盖文字
4.锚点 作用：页面不同区域的跳转，使用a链接


5.CSS精灵图/雪碧图 CSS Sprites的原理（图片整合技术）:将导航背景图片，按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，然后用background-position来实现背景图片的定位技术
图片整合的优势：
可以减少对服务器的请求次数，从而提高页面的加载速度；也会减小图片的面积。
八.宽高自适应 min-widthmax-widthmin-heightmax-height
1.窗口自适应 盒子根据窗口大小进行改变
设置方法：html,body{height:100%; }
Calc()函数的使用
用途：用于动态计算长度值：例如：width:calc(100% - 200px);
支持+—*/运算，使用标准的数学运算优先级规则
2.浮动元素的高度自适应 前端|CSS【层叠样式表Cascading Style Sheets】
文章图片

3.伪元素 更多伪类元素可参考菜鸟教程CSS 伪类 | 菜鸟教程CSS 伪元素 | 菜鸟教程
前端|CSS【层叠样式表Cascading Style Sheets】
文章图片

拓展：display: none; /* 不占位隐藏 */
visibility: hidden; /*占位置隐藏*/








    推荐阅读


    上一篇：去除基因id后的小数点信息

    下一篇：CSS学习|CSS全面学习