java-前端之css

Posted 2020-10-09 Einsam

css样式：
<!-- 内联样式:在元素的style属性内写样式 -->
<h2 style="color: red;">愿你单枪匹马,亦能所向披靡!</h2>
<!-- 内部样式:在head内部的style标签里写样式 -->
<style type="text/css" >
/*css的注释是这样的*/
h2{color: blue;}
</style>
<!-- 外部样式:在独立的css文件内写样式href是css文件的路径 -->
<link rel="stylesheet" href="my.css"/>
css样式规则：
1.继承性,父元素(字体,颜色)的某些样式可以被子元素继承
2.层叠性:给一个元素增加不同的声明,效果会叠加
3.优先级:给一个元素增加相同的声明,效果以后者为准,也叫就近原则.
css类选择器：
/*1.元素选择器*/
/*2.类选择器:根据class属性选择一类元素*/
.female{color: pink;}
/*3.id选择器:根据ID属性选择唯一的元素*/
#where{color: lime;font-size: 20px;}
/*4.选择器组:写出一组选择器,可以选中其中每个选择器对应的并集*/
.female,#where{font-weight: bold;}
/*5.派生选择器:*/
/* 1)选择某元素的子孙*/
#p5 b {color: orange;}
/* 2)选择某元素的儿子*/
#p5>b{font-size: 100px;}
p a{font-size: 50px;}
/*6.伪类选择器:选择某状态下的元素*/
/*1)选择未访问过的超链接*/
a:LINK {color:green;}
/*2)选择已经访问过的超链接*/
a:VISITED {color: red;}
/*3)选择激活态的按钮*/
.btn:ACTIVE {background: red;}
/*4)选择有焦点的框*/
.txt:FOCUS{background-color: yellow;}
/*5)选择悬停状态*/
.btn:HOVER {color: gray;width: 50px;}
img:HOVER{width: 250px;height: 250px;}
css之边框--border：
/*1.给标题单边边框*/
h1{border-left: 15px solid blue;border-right: 15px solid red;border-bottom: 15px solid yellow;border-top: 15px solid green;}
/*2.给段落四边同时加边框*/
p{border: 1px dashed red;width: auto;height: 60px;overflow: auto;}
day03
/*1.四边设置相同的边距*/
#d1{padding: 20px;margin: 40px;}
/*2.四边设置不同的边距--顺序是上右下左*/
#d2{padding: 10px 20px 30px 40px;margin: 10px 20px 30px 40px;}
/*3.单边设置边距*/
#d3{padding-top: 20px;margin-left: 30px;}
/*4.对称设置边距 -- 上下 空格后左右*/
#d4{padding: 20px 40px;margin: 50px 70px;}
/*5.对称设置的一个特例:当左右外边距设置为auto时,元素会水平居中*/
#d5{margin: 20px auto;}

 

我是初学者，如有更新不好的，欢迎这位大神指出，谢谢大家！

更多精彩以后更新，转载注明！