Web前端考试复习--css【2】

最新推荐文章于 2022-06-30 22:58:16 发布

锵锵锵～蒋

最新推荐文章于 2022-06-30 22:58:16 发布

阅读量362

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/weixin_50545615/article/details/116070783

版权

CSS

1.样式：

行内式：

<div style ="color: red; font-size:12px">123</div>

内部样式：

<style type="text/CSS">
    选择器{
       属性1: 属性值1；
       属性2: 属性值2；
}
</style>

外部样式

<link rel="stylesheet" href="index.css">

2.基础选择器：

标签选择器
类选择器
id选择器
通配符选择器*

3.复合选择器：

后代选择器：.class h3{}
子元素选择器：.class>h3{}
交集选择器：p.one{} 选择的是类名为.one的段落标签
并集选择器：.one,p{}
链接伪类选择器：

a:link 未访问过的链接

a:visited 已访问过的链接

a:hover 鼠标移动到连接上

a:active 选定的链接

4.字体样式：

font-size 设置字号（em相对于当前对象文本的字体尺寸）
font-family 设置字体用逗号隔开不同字体
font-weight ：normal=400默认值不加粗 bold=700粗体
font-style：italic斜体 normal默认
font: font-style font-weight font-size/line-height font-family 不可以省略font-size font-family

5.CSS外观属性：

color：
text-align：center/left/right水平对其
line-height：行高=高度：垂直居中；行高>高度：偏下；display:flex让文字水平垂直居中
text-indent 设置首行文本缩进em单位
text-decoration：none：标准默认；underline：下划线；overline：文本上一条线；line-through：穿过文本下一条线

6.标签显示模式：

display：inline 块转行内；block 行内转块；inline-block 转为行内块
块级元素：<h1>~<h6> ,<p>,<div>,<ul>,<ol>,<li>

块级元素独占一行，高度宽度外边距内边距可控制，p内不可以放块级元素，默认宽度是父级100%

行内元素：<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>

行内元素，一行多个，高度宽度设置无效，默认高度是本身高度，行内元素只能容纳文本或者其他行内元素

行内块元素：<img>,<input>,<td>

行内块元素，一行可以多个但会有空白风险，默认宽度是它内容本身，高度宽度内外边距可以控制

7.CSS背景：

背景颜色background-color
背景图片background-image：url(url)
背景平铺background-repeat:repeat ,no-repeat,repeat-x,repeat-y
背景位置position:top,center,bottom,left,right
半透明background :rgba(0,0,0,0.3)
盒子半透明：opacity：.2后代元素会随着一起有透明性

8.CSS三大特性：

层叠性：多种css样式的叠加，样式冲突就近原则
继承性：子标签继承父标签，文本颜色自号
优先级：

继承或* 0，0，0，0

标签选择器 0，0，0，1

每个类，伪类 0，0，1，0

每个ID 0，1，0，0

每个行内样式style 1，0，0，0

每个！important 无穷大

继承的权重 0

9.盒子模型：

盒子的实际大小：内容的宽度高度+内边距+边框
border-sizing：border-box将把padding直接包含在大小里
边框样式：none，solid实线，dashed虚线，dotted点线
当表格通过cellspacing="0"的时候，单元格和单元格之间的距离为0，但会重叠变粗，通过border-collapse：collapse可以使相邻的边框合并在一起
padding：2个值：上下，左右；3个值：上左右，下；4个值：上右下左
外边距合并：取两个值之中较大的（外边距塌陷）

10.CSS新增：

border-radius：length圆角边框 50%时是圆（左上角右上角右下角左下角）
box-shadow：offset-x offset-y blur阴影模糊距离可以为负 spread阴影大小 inset内部阴影 color

11.浮动：

清除浮动clear：right/left/both 父级添加overflow 使用after伪元素清除使用双伪元素

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility:hidden;
}
.clearfix{
    *zoom: 1;
}

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

书写顺序：

1.布局定位：display /position / clear / visibility / overflow

2.自身属性：width / height /margin /padding / border / background

3.文本属性：color / font / text-decoration / text-align / vertical-align

4.其他属性：content/ cursor / border-radius / box-shadow

绝对定位盒子居中：left：50%，margin-left：-width/2
z-index 数值越大，盒子越上，数字后面不能加单位，只能用于相对定位，绝对定位，固态定位，其他标准流，浮动，静态无效
overflow：hidden不显示超过对象尺寸的内容，scroll不管超出与否，总显示滚动条，auto超出自动显示滚动条，visible不剪切内容也不添加滚动条
鼠标样式cursor：default小白 pointer小手 move移动 text文本 not-allowed禁止
轮廓线outline：none
防止拖拽：resize：none
vertical-align：控制图片文字垂直关系 baseline基线 middle垂直居中 top顶部
除去图片底侧空白缝隙： img vertical-align：middle 或者display：block
white-space：nowrap强制在同一行显示
text-overflow：ellipsis当对象文本溢出显示省略号标记

css指的是

Cascading Style Sheets

结构与样式分离依赖于

css

下面不属于css插入形式的是（A）