css学习-1

CSS声明学习
- 在head标签中使用style标签声明: - 作用:此声明一般声明当前网页的公共样式或者给某个标签的单独样式
 
- 在head标签中使用link标签引入外部声明好的css文件 - <-link rel=”stylesheet” type=”text/css” href=”路径”/>
- 作用:此声明相当于调用,解决了不同网页间样式重复使用的问题.一次声明,随处使用
 
- 在标签上使用style属性进行声明: - 作用:此声明会将css样式直接作用于当前标签。
 
- 问题:不同的声明给同一个标签操作了同一个样式,会使用谁的? - 如果Css的声明全部在head标签中,则遵循就近原则,谁离标签近,谁就会被显示。1 
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22<html> 
 <head>
 <meta charset="UTF-8">
 <title>css的声明学习</title>
 <!--引入外部声明好的css文件-->
 <link rel="stylesheet" type="text/css" href="css/my.css"/>
 <!--声明css代码域-->
 <style type="text/css">
 hr{
 width: 50%;
 height: 20px;
 color: red;
 background-color: red;
 }
 </style>
 </head>
 <body>
 <h3>css的声明学习</h3>
 <hr style="background-color: blue;height:50px;"/>
 <hr/>
 </body>
 </html>css样式使用
 
- 如果Css的声明全部在head标签中,则遵循就近原则,谁离标签近,谁就会被显示。
- 添加背景图片 - background-image: url(img/a1.jpg)
 
- 设置背景颜色 - background-color: orange;
 
- 设置图片不重复 - background-repeat: no-repeat;(当图片尺寸不足时,会自动重复而铺满整个屏幕)
 
- 设置图片平铺 - background-size: cover;(图片平铺整个页面)
 
- 添加边框及其颜色和大小 - border: solid 1px red;(solid实线)
 
- 设置表框的角度 - border-radius: 10px;
 
- 设置倾斜角度 - transform: rotate(-10deg);
 
- 设置文本位置 - text-align: center;
 
- 设置文本颜色 - color: blueviolet;
 
- 设置文本加粗 - font-weight: bold;
 
- 设置字体间距 - letter-spacing: 10px;
 
- 设置超链接去除下划线 - text-decoration: none;
 
- 伪类-鼠标划过链接 - img:hover{}
 
- 浮动方式 - float: left;(左浮)
 
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Kylin!
 评论










