css301

css选择器基本语法

1. 标签名字+ {}

2. 派生选择器:

   现写上一级的标签名,然后空格 再写当前标签名,则实现派生选中

3. id选择器 (常和派生选择器一起使用)

   id选择器 以 #号来选取的

   给

   标签加id最常见

4. class选择器(类选择器)

   类选择器以.来选取

   也可以和派生选择器一起使用

5. 属性选择器\属性和值选择器

   在标签中写出属性就可以

   [属性]{}

   [属性=值]{}

css-背景-1

1. background-color: 设置元素的背景颜色
2. background-image: 背景图片
3. background-repeat: 设置图形不允许重复
4. background-position: 设置背景图片的起始位置 从图片的那个地方开始显示
5. background-attachment: 设置背景图像是否跟随页面进行滚动 fix(固定,就是页面滚动,但是背景图片固定)
6. background-size: 设置背景图片的大小

css-文本-2

1. color: 文本颜色

2. text-align: 文本对齐方式

3. text-indent: 首行缩进

4. text-transform: 改变文本的大小写

5. text-shadow: 给文字添加模糊效果 x偏移 y偏移 范围大小 颜色

css-字体-3

1. font-size: 设置字体大小

2. font-family: 设置字体型号

css-链接-4

链接的4种状态:

1. linked:普通的,未被访问的
2. visited: 已经访问过的
3. hover:鼠标悬停在链接上方的
4. active: 链接被点击的时刻
5. text-decoration: none 清除下划线
6. background-color: 背景颜色

a:link {
    color: red;
    text-decoration: none;
    background-color: chartreuse;
}

css-列表-5

1. list-style-type: ; 修改li项的 圆圈,方框,或者数字

2. list-style-image: ; 修改li项的标签为icon,用url()引入

3. list-style-position: ;修改li项的左右位置

css-表格-6

1. border: 1px solid blue; 设置外边框

2. border-collapse: collapse; 折叠边框(合并边框)

3. text-align: center; 让td的内容居中

4. background-color: chartreuse; 设置表格的颜色

5. width: ; 表格的宽高

6. height: ;

css-轮廓-7 (突出元素作用)

1. outline-style: double; 轮廓线的样式

2. outline-color: ; 轮廓线的颜色

3. outline-width: ; 轮廓线的宽度

css-定位-8(1.普通流,定位)

第一种 普通流

1. position 4种情况:

    1) 相对 relative

    2) 绝对 absolute

    3) 固定 fixed (跟随翻页条)

    4) 静态 static (top left等距离失效)

2. z-index 上下覆盖的先后

css-定位-9(2.浮动)

浮动脱离的文档流,但是不会像绝对布局那样完全脱离,而是会影响旁边元素的布局

并且浮动受到高度影响

1. float: xx; 向xx浮动

2021/7/31 15:48

css-盒子模型-10

想象矩形的四个部分(margin(外边距)+border(边框)+padding(内边距)+content(内容))

css-盒子模型-边框样式(border-style)

1. 边的总样式

   border-style:double;

2. 分别设定4条边的样式

   border-top-style: groove;

   border-bottom-style: hidden;

   border-left-style: outset;

   border-right-style: ridge;

3. 边的宽度

   border-width: 20px;

4. 单边框的宽度

   border-top-width: 20px;

5. 边框的颜色

   border-color: lime;

6. 单边框的颜色

   border-top-color: red;

   border-left-color: khaki;

   border-right-color: lawngreen;

   border-bottom-color: lightsalmon;

css3提供边框效果:

1. 圆角边框

   border-radius: 100px;

2. 边框的阴影效果

   box-shadow: 10px 10px 50px lime; (x y radius color)

<p>标签中文本对齐:

text-align: center;

css-盒子模型-外边距合并

两个<div>的margin合并,取maring最大的这个(高度塌陷)