CSS学习笔记

 1 CSS 中选择器，在标签里面对格式进行设置

文本居中

text-align 文本对齐方式 left 左对齐 right 右对齐 center居中 justify

两个div块需要重叠时候，其中一个需要半透明
opacity：0.5；透明度

标题

h1 h2 h3 h4 h5 h6 h7 ,

超级链接

超级链接的写法
超级链接打开的位置，“# ” 不刷新页面 “###” 锚点的效果，页面在很长的情况下，页面依然停留在当前光标的位置
text-decoration:none 下划线

p段落上下行间距

在文本里面可以有line-height设置行间距，同时也需要设计外边框属性margin 设置才能共同调整整体段落的行间距

文字的设置

A 内部样式表
B 外部样式表
通过
内部与外部在具体的格式设置一样
color
字体类样式 主要大小 斜体等
font-size 大小
font-weight高度 bold 加粗 100-900/也可以显示 normal 正常显示
font-style字体样式 normal/不做改变 italic/斜体字，有部分没有斜体 oblique/倾斜显示 后两者同样效果
font-family: 字体
p{
color : red ;
border：1px 边框大小；

background-image:  url("图片路径");
background-attachment: fixed;背景图片固定

}

背景的设置

background-color 背景颜色
background-image 背景图片
repeat 背景图片的方向有 4种
1 repeat xy 全屏幕重复 2 单独的 repeat-x /y 一个方向
3 no-repeat 图片没有重复
background-attachment 背景随管道条滚动
background-position有多个属性
top left center right 是以两两一组形式，默认为center居中
块状显示的都可以加背景

表单

表单用于收集用户信息，进行人机交互
包含元素 文本框，单选按钮 列表框 图片框 复选框 统称为控件
name 名称 id 标签唯一标识 value输入控件的值 checked 复选框默认被选中的项目 selected 列表框组默认被选中的项目
src 图片宽的图片来源 disabled 禁用该控件

列表的属性设置

list-style-type（有序默认 decimal /无序默认disc）
ul/ol{
list-style-type:circle; 空心圆
list-style-type:lower-latin ; 有序abc 、unper-roman 罗马字体
list-style-position：outside默认；inside向右边偏移
list-style-image：url(“图片地址”);系列变成图形
list-style：none 列表圆圈不显示
}
list-style-position
list-style-image
list-style: 同前面按顺序简写

伪类的样式

通常 超级链接上设置的样式称为伪类，但是，伪类是用在超级链接上比较多，但并不是超级链接就是伪类
伪类以冒号（：） 开头 如下
a:link{
color:red;
}

1. a:link 超级链接未被访问的时候
2. a:visited 超级链接已访问的时候
3. a:hover 所有有悬停，浮动效果的元素与组件
4. a: active 鼠标按下被激活的样式
5. :focus 获得焦点的元素

伪类的分类

状态的伪类
结构的伪类

1. p:first-child { 选择元素的第一个子元素
   必须恰好p是第一个子元素
   }
2. :last-child{ 选择最后一个，但必须恰好p是最后一个}
3. p:nth-child（2） {选择中间的元素，一个或多个，小括号选择第几个，适用于表格，如果是表格，从左边开始数，第2列}
4. .p:nth-last-child(2){重最后一个数}
5. p:first-of-type{ 选择上级元素下的第一个出现p的子元 素}

伪元素选择器

伪元素选择器以2个冒号：：做开头
能给任何一个独立标签添加

• p::before{在开头插入
  content:“插入文字” }
• p::after{ content:“插入文字” }
• p::first-line{ background-color:red; }指定选择器的首行
• p::first-letter{ }指定选择文本的第一个字符
• p::selection{ background-color:red; }指定选中的内容效果/需要是文档本身录的而不是设置添加的
  伪类与伪元素要区分清楚，除了单双冒号区分，还一个就是看选择的内容，是一整行，还是部分的内容

其他选择器

• class选择器，以点 。开头，且容许重复

.p1{ color: blue }
标签选择器 p table ul 等

• id选择器 唯一的不能重复，以#号开头

#name{ }

• 选择器， 通配符 ，当前body的所有文字。(包括h1等也被控制)
• ，逗号选择器#name1，#name2 逗号两边的都会被控制

div 一个容器 不会显示出来，用来区分范围

• #div>p{用于选择子选择器 }
• #div+p{ 和div同一级的段落都被选中}
• p[class=“p1”]{属性选择器，只选择class 为p1的内容 }

选择器的优先级

！important
行内样式 （通常使用外部样式表）
ID选择器 （ID选择器一般已经很高）
类选择器
标签
通配符
浏览器默认属性

什么是DIV，DIV的样式设置

• div大小，背景设置

标签div{
background-color
width 宽度
height 高度
position（定位方式 ）absolute/参照物绝对定位
top(定位的，上边距离)
left
}

• div溢出的效果演示，换行，滚动条设置

overflow属性设置
visible 默认，会出现在边框之外
hidden 超出部分隐藏
scroll 都显示滚动条
auto按需显示滚动条

• div边框，轮廓设置（任何带边框的都是一样）

盒子模型（css浮动）
flaot 的设计初衷，图文混排，环绕设置。

待解决问题

• 什么是父元素的塌陷 / 指父元素未定义高度时，下级的子元素浮动后，父元素的高度变为无，出现的这种现象叫父元素的坍塌
• clear属性参数值代表的意义
• 文字的下划线

清除浮动

清除浮动 clear: both ;把后面的标准流清除浮动，块会被放在前门非标流的下面 第二种，单独加一个清除浮动的div块
第三中， 用伪元素选择器：：after，
clear 属性可选参数值为left、right、both、none、inherit、

#clearDiv::after{
contert: "";/内容设置空元素
visibility：hidden；防止其他地方设置误操作后，依然内容隐藏
height：0px；行高初始化
display：block；块装显示 、none 块状不显示
clear：both； 清除浮动
zoom：1；主要在ie浏览器用，用户用ie用都加***
}

在复杂程序里面的清除浮动的主流

定位

position：

1. relative相对 相对偏移参考元素是元素本身。
2. absolute绝对 最近的祖先定位，如果没有祖先元素，就是以body定位，绝对文档流会被破坏，有点与flaot相同，以flaot不会覆盖原有的文字，绝对定位会覆盖原有的文字
   z-index:50; 层叠顺序，数字用整倍数，便于后期代码扩充与维护
3. static无定位 按文档流从上往下，从左往右排列
4. fixed固定 相对浏览器是固定不变的

边框设置

border：1px 线宽 solid（实线）/ dashed（虚线）/none（无边框） red 颜色 一般有这3要素
border-radius: 20px/30px 角度（可以设置椭圆）， 设置一个字的行高里面文字是自动居中的，
通常在父元素里用相对定位，子元素用绝对定位。当父元素相对定位位置改变的时候，子元素跟着改变

文字下划线

text-decoration 属性规定添加到文本的修饰。
注释：修饰的颜色由 “color” 属性设置。
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。
inherit 规定应该从父元素继承 text-decoration 属性的值