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;
}
- a:link 超级链接未被访问的时候
- a:visited 超级链接已访问的时候
- a:hover 所有有悬停,浮动效果的元素与组件
- a: active 鼠标按下被激活的样式
- :focus 获得焦点的元素
伪类的分类
状态的伪类
结构的伪类
- p:first-child { 选择元素的第一个子元素
必须恰好p是第一个子元素
} - :last-child{ 选择最后一个,但必须恰好p是最后一个}
- p:nth-child(2) {选择中间的元素,一个或多个,小括号选择第几个,适用于表格,如果是表格,从左边开始数,第2列}
- .p:nth-last-child(2){重最后一个数}
- 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:
- relative相对 相对偏移参考元素是元素本身。
- absolute绝对 最近的祖先定位,如果没有祖先元素,就是以body定位,绝对文档流会被破坏,有点与flaot相同,以flaot不会覆盖原有的文字,绝对定位会覆盖原有的文字
z-index:50; 层叠顺序,数字用整倍数,便于后期代码扩充与维护 - static无定位 按文档流从上往下,从左往右排列
- fixed固定 相对浏览器是固定不变的
边框设置
border:1px 线宽 solid(实线)/ dashed(虚线)/none(无边框) red 颜色 一般有这3要素
border-radius: 20px/30px 角度(可以设置椭圆), 设置一个字的行高里面文字是自动居中的,
通常在父元素里用相对定位,子元素用绝对定位。当父元素相对定位位置改变的时候,子元素跟着改变
文字下划线
text-decoration 属性规定添加到文本的修饰。
注释:修饰的颜色由 “color” 属性设置。
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。
inherit 规定应该从父元素继承 text-decoration 属性的值