【34】
1、CSS 进阶
A、为何自学 CSS（CSS 的促进作用）
【1】HTML 尽管能在很大某种程度上润色页面，但页面的总体却是不如耐用。
【2】HTML 展开页面的手写多次重复的标识符较为多，中后期的FEA不好。
B、甚么是 CSS（CSS 的基本概念）
英语全名：Cascading Style Sheets
竹节JSP（交叉耦合JSP）
CSS 的导入形式
CSS 的导入的四种形式
在条码的外部间接采用（不所推荐采用）
<!–1、Lembron式 style=“key:value;”style=“font-size:
30px;color: yellow;” —>
<!–2、嵌入式样 那个style条码写提议写到head里头，因
为那个中的文本须要展现出到使用者眼前的–>
<style>
/*选择器 */
span{
/*字体的大小*/
font-size: 30px;
/*字体的颜色*/
color: red;
/*字体的式样*/
font-family: 宋体;
}
</style>
那个 (.css)文件是在外部定义好的文件间接建立csss
文件就能了
<!–3、链接式 rel:当前的文档和导入的文档的关系
href:是指导入文档的关系–>
<link rel=“stylesheet” href=“css/css.css”
/>
<!—**了解：这种形式也能导入CSS的式样，作为了解–>
<style>
@import url(“css/css.css”);
</style>
CSS 中四种导入形式遵循的就近原则 ：
不相同的式样会展开式样的叠加，相同的式样会采用就近的原则。式样跟随距离自己近的风格
CSS 中的常用选择器 :
条码选择器
p{
color: red;
}
id选择器
id:(唯一性)
id命名：数字、字母、下划线、中划线（-），不能用数字开头
#p_1{
font-size: 30px;
color: yellowgreen;
}
class选择器
.p_2{
font-weight: bold;
color: yellow;
}
四种选择器的优先级：
id 选择器>class 选择器>条码选择器
权重 100 10 1
CSS 中其他选择器
后代选择器 只要包含该条码对象即可
div span{
font-size: 27px;
font-family: 宋体;
color: red;
}
子选择器 直系子条码
div>span{
color: red;
}
兄弟选择器 只会改变下面相邻的元素对象
#p_1+p{
color: green;
}
兄弟选择器 后面所有的兄弟对象都会改变
#p_1~p{
color: red;
font-size: 30px;
}
伪类选择器
a:hover{
color: red;
}
CSS 中常用式样总结 1
字体：（font）
/*字体的颜色*/
color: gray;
/*字体的大小*/
font-size: 12px;
/*字体的加粗*/
/*font-weight: bold;*/
/*字体的风格*/
/*font-family: 宋体;*/
/*字体倾斜*/
/*font-style: italic;*
文本（text）
/*下划线展示*/
text-decoration: underline;
/*去除下划线*/
text-decoration: none;
/*文本居中*/
text-align: center;
border 属性有三个润色属性
border-color
border-color:red;
border-top-color:blue;
border-width
border-width: 1px;
border-left-width: 3px;
border-style
border-style: solid
border-bottom-style: solid；
能采用border统一设置
border: 1px solid red;
border-right: 5px dotted blue;
CSS 常用式样总结 2
行高
line-height: 40px;
背景
/*设置背景图片*/
background-image:
url(“http://img30.360buyimg.com/da/jfs/t22399/154/7
65213112/96035/f94f9605/5b17512dN2de9d722.jpg”);
/*设置背景图片不多次重复*/
background-repeat: no-repeat;
/*调整背景图片的位置 X Y*/
background-position: center;
/*调整背景图片的大小 宽 高 */
/*background-size: 300px 500px;*/
/*背景颜色 red #f0000 rgb(255,0,0)
rgba(255,0,0,.5){包含透明度} */
background-color: rgba(255,0,0,.5);
CSS 中常用式样总结 3
行元素和块元素
Lembron元素：（多个条码位于同一行）
span font 小条码 img a 等
块元素：（条码能自动换行的元素是块元素）
div h1-h6 ul p 等
其他式样
/*调整透明度的属性 0-1*/
opacity: 0.4;
/*超出隐藏 hidden*/
overflow: hidden;
/*Lembron元素转块级元素 inline block none(隐藏)*/
display: block;
CSS 中的定位
绝对定位:
absolute :定位离开之后释放的之前的位置 基于外
层父级条码来说
相对定位：
relative: 定位离开之后之前的位置没有释放 基于之
前的位置来说
固定定位：
fixed ：始终是基于浏览器的左上角定位 适合做广告
默认定位：
static ：初始的定位的操作
