css
作用：用于对HTML页面进行系统的样式外观修饰
基本语法：
选择器{属性1：值；属性2：值.....}
编写方式
Css设计在页面的<Style>标签中进行，以外接的方式进行样式的渲染
<style>
• div{
• background-color: #226699;
• }
•
• </style>
（2）内接样式：
对指定标签通过自身的style属性进行样式设计
<div style="color: #FFFFFF;">css用于页面渲染</div>
（3）外链样式：
通过引入外部.css文件的方式，进行样式设计，通常使用的标记为link
<link href="css/buttonstyle.css" rel="stylesheet" />
外接样式的作用范围：当前页面的所有标记
内接样式的作用范围：特定标签元素本身
外链样式作用范围：所有引入此资源的页面样式都可以通过外链样式表进行设计。
三种css资源设置方式的优先级：
（1）内接样式优先于外接和外链
（2）外接样式和外链样式，后编写（后引入的）资源覆盖先编写（先引入）的资源
使用原则：
多个页面统一风格，引入外链样式统一设置，有一个页面的部分样式区别于其他页面，在该页面引入外链样式的下面编写外接样式，批量调整，有个别样式需要调整，但单独使用内接样式进行设置。
选择器：
本质可以理解为“作用范围”
常用的第选择器：
（1）id选择器
使用#进行选择
#bt1{
• width: 100px;
• height: 50px;
• background-color: #226699;
• color: pink;
• }
Id与name都可以定位元素，区别在于id属性全局唯一，name属性可以重复
（2）类选择器
使用class属性进行选择 ，使用方式为.classname；
Class选择器可以累加，搭配组合使用
<button class="bt2 bt5">ok1</button>
.bt2{
• height: 200px;
• }
•
• .bt5{
• width: 200px;
•
• }
（3）标记选择器
使用标签名字进行选择
div{
• background-color: #226699;
• color: red;
• }
（4）属性选择器
[type="text"]{
• height: 50px;
• }
Hhml5与css3可以使用自定义属性与默认属性
<button xiaoming="tom">ok6</button>
[xiaoming="tom"]{
• width: 300px;
• }
选择器优先级：
#id>.类选择器（属性选择器）>标记选择器
层叠选择器：在指定的范围内进行进一步筛选
（1）父标记（选择器） 子标记（选择器）：父标记下的直接或间接子标记都在选择范围内
（2）父标记（选择器）>子标记（选择器）：父标记下的直接子标记进入选择范围
多层嵌套选择器优先级看最左侧（第一层父标记）的优先级
伪类和伪元素
/* 没有被访问过 */
a:link{
color: black;
}
/* 访问过以后 */
a:visited{
color: red;
}
/* 鼠标悬停后的状态 */
a:hover{
color: yellow;
}
/* 当点击时候的状态 */
a:active{
color: pink;
}
/* 单行添加样式 */
table tr:nth-child(odd){
}
/* 双行添加样式 */
table tr:nth-child(even){
}
/* 将特殊样式添加到元素的第一行 */
table tr:first-child{
}
/* 将特殊样式添加到元素的最后行 */
table tr:last-child{
}
/* 聚焦 */
button:focus{
}
/* 添加前缀 */
a:before{
content: url('img/dd.jpeg');
}
/* 添加后缀 */
a::after{
content: 'abc';
}
锚点
通过超级链接的href的属性值为当前页面组件的id值，以#指定id值，进行设置，点击超链后，让指定id的组件获取焦点进行页面显示。
<style>
\#dv1{
height: 1200px;
}
</style>
</head>
<a href="#abc">第一章</a>
<divid="dv1">jkashjkashjksahkjsahjkashkjhas</div>
<button id="abc">okk</button>
常用样式及属性详见表格：
浮动
当元素设置float属性为left或right时，元素本身将脱离文档层（默认布局方式），以类似漂浮的效果向左侧或右侧移动，直到碰到父节点边框或另外一个浮动的元素为止
overflow 高度塌陷
高度塌陷
在外部元素未设置height属性的前提下，外部div的高度是弹性变化的，当内部元素设置为float值非none时，外部元素的height不再随着内部元素弹性变化，称为外部元素的高度塌陷
可以设置外部元素overflow=auto 来解决
display属性：设置元素的布局方式
block阻塞，与width视觉效果无关，元素前后带有换行符
inline：元素现实为内联元素
-
元素本身紧贴内部元素之上，width、height无效
-
当元素内部尺寸很大时，自动溢出，但inline不会弹性变化
-
常见的inline标签：lable、span
inline-block：不阻塞、并且width、height有效，弹性高度，有默认间距
常见元素包括button、input等
none：元素隐藏不显示，注意和visbility的比较
定位
position：定位控制，强调三维层次
-
元素不加设置，position默认为static，可以理解为处于第0曾
-
元素设置position为absolute、relative时，元素脱离第0曾
-
元素在position属性不为static的前提下，通过z-index可以进行层次设置
-
元素在position属性部位static的前提下，通过left、top等属性设置元素的x轴y轴偏移量
-
当元素的position值不是static时，它的位置父节点和结构父节点可以不一致 元素的结构父节点如果也设置position为非static，此时二者一致，否则元素的位置父节点上移至其父节点直接或间接存在非static的节点
transform元素旋转
/* 默认按照z轴旋转，可以指定x轴或y轴 */
transform: rotateX(180deg);
/* 在视觉上按照比例缩放 */
transform: scale(1.5,1.5);
/*需要过度的属性、完成时长*/
transition: transform 2s;
/* scale图片按比例在视觉上缩放，没有改变元素本身的和模型
多个图片效果可以放在一起指定*/
#dv1:hover{
transform: rotate(0deg) scale(1.5,1.5);
}
/* 图片位移变化，不会影响同级节点布局 */
transform: translate(30px,30px);
浙公网安备 33010602011771号