第一阶段 XHTML.选择器2与布局

 

一位初学php的随堂笔记，记录自己的成长！

1.选择器
（1）通配选择器 *{...}
(2)标记选择器 标记{...}
（3）class选择器 .class名称{...}
（4）id选择器 #id名称{...}
（5）群组选择器 选择器名称,选择器名称...{...}
（6）后代选择器 选择器名称 选择器名称{...}
（两个选择器至少父子关系）
(7)子代选择器 选择器名称>选择器名称{...}
（两个选择器必须父子关系）
2.选择器优先级
标记选择器 0001
class选择器 0010
id选择器 0100
内联选择器 1000
说明:权值越大优先级越大，样式应用权值大的效果
优先级是同级，后面的样式覆盖前面的样式
继承的优先级最低，!important优先级最大

3. 伪类选择器
(1)行为伪类
:link 链接未访问的状态
:visited 链接访问过的状态
:hover 设置鼠标悬停效果
:active设置鼠标激活效果
说明:LVHA顺序设置样式
工作中：
a{/*统一设置4个状态*/
color:#999;
text-decoration:none;
}
a:hover{
color:#f00;
text-decoration:underline;
}
:focus :获得鼠标焦点状态
(2)UI元素伪类
:checked 设置元素选中状态(CSS3.0)
:disabled 设置元素禁止状态
:enabled 设置元素启用状态

4.伪元素选择器
:before 在元素之前添加内容
:after 在元素之后添加内容

例如:
p:before{
content:'文本'|url(图像URL);
}
5.文本样式
(1)文本颜色 color:value;
（2）文本大小 font-size:value;
（值单位: 像素px;
em浏览器默认字体大小的比例
例如: 1.5em 1.5倍字体大小）
(3)文本修饰 text-decoration:none|
underline下划线|
overline 上划线|
line-through删除线

(4)文本倾斜 font-style:normal正常|
italic 倾斜
(5)文本加粗 font-weight:normal正常|
bold 加粗|数值(100-900)
normal==400 bold==700
（6）文本字体 font-family:宋体,arial,
"Time New Roman";
（7）text-align:left|center|right
文本水平对齐方式
(8)行高 line-height:value;
说明：当盒子高度和 行高一致时，实现文本
在盒子中的垂直居中
(9)font-variant:normal|
small-caps小型大写字母

(10)text-transform:none|
capitalize 每个单词首字母大写
uppercase 转大写
lowercase 转为小写

(11)text-indent 缩进
例如: text-indent:2em; 首行缩进
说明:只能对块元素实现缩进，行元素不可以实现



font缩写形式

font:font-style 倾斜||
font-variant 小型大写字母||
font-weight 加粗||
font-size 字大小/line-height行高||
font-family字体

6.布局样式--盒子属性
div标记:没有实际意义的块元素(宽度是父级100%)
span标记:没有实际意义的行元素(宽度是文本内容宽度)
(1) width 宽度
(2) height 高度
说明:只能对块元素或有宽高属性的标记(img,input等)
设置宽高，而行元素不能设置宽高
(3) padding:内边距，内容到边框的距离

padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距

说明: 内边距只有正值，并且设置内边距
撑大盒子

缩写形式
padding:value; 上下左右相同的值
padding:value value;
上下一个值 左右一个值
padding:value value value;
上 左右一个值 下
padding:value value value value;
上 右 下 左

(4)margin：外边距，边框的外围

margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:左外边距

缩写形式
margin:value; 上下左右相同的值
margin:value value;
上下一个值 左右一个值
margin:value value value;
上 左右一个值 下
margin:value value value value;
上 右 下 左

说明:
a.外边距可以有 正值，负值，
auto(块元素水平居中效果)

b. 清除块元素空隙
margin:0;
padding:0;
c. 两个盒子上下margin冲突，取大值
如果两个盒子左右margin冲突，值相加

d.嵌套盒子，子盒子的上下margin值
传递给父盒子，上下盒子冲突取大值

(5)border 边框

border-top-width:value; 上边框宽度
border-top-color:value; 上边框颜色
border-top-style:value; 上边框样式
（上边框样式值: solid 实线,dashed虚线
dotted 点线 double双线 ）

border-right-width:value; 右边框宽度
border-right-color:value; 右边框颜色
border-right-style:value; 右边框样式

border-bottom-width:value; 下边框宽度
border-bottom-color:value; 下边框颜色
border-bottom-style:value; 下边框样式

border-left-width:value; 左边框宽度
border-left-color:value; 左边框颜色
border-left-style:value; 左边框样式

缩写形式1
border-width:value;四个方向的边框宽度
border-width:value value;
上下宽度 左右宽度
border-width:value value value;
上宽度 左右宽度 下宽度
border-width:value value value value;
下宽度 右宽度 下宽度 左宽度
border-color:value;四个方向的边框颜色
border-style:value;四个方向的边框样式

缩写形式2

border:width color style;
例如: border:1px solid #f00;


（6）盒子总宽度计算：

总宽度 = 左margin宽 + 左border宽 + 左padding宽
+盒子宽 + 右padding宽 + 右border宽
+ 右margin宽

7. 布局
(1)文档流布局(默认)
(2)浮动布局
(3)定位布局

8. 浮动布局
(1)格式
float:left左浮动|right右浮动|none不浮动
(2)说明
a.浮动元素脱离文档流(不占位)
b.浮动元素不管左浮动还是右浮动，会碰到(靠在)
有边框的边界或另一个浮动元素才停止编辑
c.浮动块元素，如果没有设置宽高，宽与文本宽
度一致
d.浮动行元素，因为脱离文档流可以设置宽高（
在文档流中行元素不能设置宽高）
e.浮动元素对后面的元素的影响是实现文本环绕

 

 

 

 

转载于:https://www.cnblogs.com/guowangdeyanjiang/p/5450631.html