JavaWeb笔记:CSS总结

迷南。 2022-03-11 12:16 212阅读 0赞

# JavaWeb笔记:CSS总结 #

**目录**

JavaWeb笔记:CSS总结

一、css的简介

二、css选择器

三、css属性

四、css盒子模型

--------------------

# **一、css的简介** #

**1、什么是css  
层叠样式表，css是对html进行样式修饰语言  
层叠：就是层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的部分应用优先级高的，不冲突的部分共同作用  
样式表：就是css属性样式的集合  
2、css的作用  
(1)修饰html的 使其html样式更加好看  
(2)提高样式代码的复用性  
(3)html的内容与样式相分离 便于后期维护  
  
3、css的引入方式和书写规范  
(1)内嵌样式  
内嵌样式是把css的代码嵌入到html标签中  
<div style="color:red;font-size: 100px;">你好啊 小朋友</div>  
语法：  
(1)使用style属性将样式嵌入到html标签中  
(2)属性的写法：属性：属性值  
(3)多个属性之间使用分号;隔开  
不建议使用  
(2)内部样式  
在head标签中使用style标签进行css的引入  
<style type="text/css">  
div\{color:red;font-size: 100px;\}  
</style>  
语法：  
(1)使用style标签进行css的引入  
<style type="text/css">  
属性：type：告知浏览器使用css解析器去解析  
(2)属性的写法：属性：属性值  
(3)多个属性之间使用分号;隔开  
  
(3)外部样式  
将css样式抽取成一个单独css文件 谁去使用谁就引用  
<link rel="stylesheet" type="text/css" href="demo1.css"/>  
语法：  
(1)创建css文件 将css属性写在css文件中  
(2)在head中使用link标签进行引入  
<link rel="stylesheet" type="text/css" href="css文件地址"/>  
rel:代表要引入的文件与html的关系  
type：告知浏览器使用css解析器去解析  
href：css文件地址  
(3)属性的写法：属性：属性值  
(4)多个属性之间使用分号;隔开  
(4)@import方式  
<style type="text/css">  
@import url("css地址");  
</style>  
link与@import方式的区别：  
(1)link所有浏览器都支持 import部分低版本IE不支持  
(2)import方式是等待html加载完毕之后在加载  
(3)import方式不支持js的动态修改**

#    **二、css选择器** #

**1、基本选择器  
(1)元素选择器  
语法：html标签名\{css属性\}  
示例：  
<span>hello css!!!</span>  
<style type="text/css">  
span\{color:red;font-size:100px; \}  
</style>  
(2)id选择器 id唯一性  
语法：\#id的值\{css属性\}  
示例：  
<div id="div1">hello css1!!!</div>  
<div id="div2">hello css2!!!</div>  
<style type="text/css">  
\#div1\{background-color: red;\}  
\#div2\{background-color: pink;\}  
</style>  
(3)class选择器  
语法：.class的值\{css属性\}  
示例：  
<div class="style1">div1</div>  
<div class="style1">div2</div>  
<div class="style2">div3</div>  
<style type="text/css">  
.style1\{background-color: red\}  
.style2\{background-color: pink\}  
</style>  
  
\*\*\*选择器的优先级：id>class>元素  
  
2、属性选择器  
语法：基本选择器\[属性=‘属性值’\]\{css属性\}  
示例：  
<form action="">  
name:<input type="text" /><br/>  
pass:<input type="password" /><br/>  
</form>  
<style type="text/css">  
input\[type='text'\]\{background-color: yellow\}  
input\[type='password'\]\{background-color: pink\}  
</style>  
  
3、伪元素选择器  
a标签的伪元素选择器  
语法：  
静止状态 a:link\{css属性\}  
悬浮状态 a:hover\{css属性\}  
触发状态 a:active\{css属性\}  
完成状态 a:visited\{css属性\}  
示例：  
<a href="\#">点击我吧</a>  
<style type="text/css">  
a:link\{color:blue\}  
a:hover\{color:red\}  
a:active\{color:yellow\}  
a:visited\{color:green\}  
</style>  
  
4、层级选择器  
语法：父级选择器 子级选择器 .....  
示例：  
<div id="d1">  
<div class="dd1">  
<span>span1-1</span>  
</div>  
<div class="dd2">  
<span>span1-2</span>  
</div>  
</div>  
<div id="d2">  
<div class="dd1">  
<span>span1-1</span>  
</div>  
<div class="dd2">  
<span>span1-2</span>  
</div>  
</div>  
  
<style type="text/css">  
\#d1 .dd2 span\{color:red\}  
</style>**

#    **三、css属性** #

**1、文字属性  
font-size:大小  
font-family:字体类型  
2、文本属性  
color:颜色  
text-decoration:下划线  
属性值：none underline  
text-align:对齐方式  
属性值：left center right  
<div>hello css!!!</div>  
<a href="\#">click me!!!</a>  
<style type="text/css">  
div\{color:red;text-decoration: underline;text-align: right \}  
a\{text-decoration: none;\}  
</style>  
3、背景属性  
background-color:背景颜色  
background-image:背景图片  
属性值：url("图片地址");  
background-repeat:平铺方式  
属性值：默认横向纵向平铺  
repeat:横向纵向平铺  
no-repeat:不平铺  
repeat-y：纵向  
repeat-x：横向  
  
body\{  
background-color: black;  
background-image: url("images/dog.gif");  
background-repeat: repeat-y;  
\}  
  
4、列表属性  
list-style-type:列表项前的小标志  
属性值：太多了  
list-style-image:列表项前的小图片  
属性值：url("图片地址");  
  
<ul>  
<li>黑马程序员</li>  
<li>黑马程序员</li>  
<li>黑马程序员</li>  
<li>黑马程序员</li>  
</ul>  
<style type="text/css">  
/\* ul\{list-style-type: decimal-leading-zero;\} \*/  
ul\{list-style-image: url("images/forward.gif");\}  
</style>  
  
5、尺寸属性  
width:宽度  
height:高度  
<div id="d1">div1</div>  
<div id="d2">div2</div>  
<style type="text/css">  
\#d1\{background-color: red;width: 200px;height: 200px;\}  
\#d2\{background-color: pink;width: 200px;height: 200px;\}  
</style>  
6、显示属性  
display:  
属性值：none:隐藏  
block:块级显示  
inline：行级显示  
  
<form action="">  
name:<input id="name" type="text" /><span id="span">对不起 输入不符合要求</span>  
<br>  
pass:<input id="pass" type="password" />  
<br>  
<input id="btn" type="button" value="button" />  
</form>  
<style type="text/css">  
span\{color:red;display: none\}  
</style>  
<script type="text/javascript">  
document.getElementById("btn").onclick = function()\{  
document.getElementById("span").style.display = "inline";  
\};  
</script>  
  
7、浮动属性  
float:  
属性值：left right  
clear:清除浮动 left right both  
缺点： (1)影响相邻元素不能正常显示  
(2)影响父元素不能正常显示**

# **四、css盒子模型** #

**border:  
border-width:边框的宽度  
border-color:边框的颜色  
border-style:边框的线型  
  
border-top:上边框  
border-bottom:下边框  
border-left:左边框  
border-right:右边框  
  
padding:  
代表边框内壁与内部元素之间的距离  
padding:10px;代表上下左右都是10px  
padding:1px 2px 3px 4px;上右下左  
padding:1px 2px;上下/左右  
padding:1px 2px 3px;  
padding-top:单独设置  
margin:  
代表边框外壁与其他元素之间的距离  
margin:10px;代表上下左右都是10px  
margin:1px 2px 3px 4px;上右下左  
margin:1px 2px;上下/左右  
margin:1px 2px 3px;  
margin-top:单独设置**