Html-样式表、字体、背景图

布满荆棘的人生 2022-06-14 10:21 124阅读 0赞

一. 样式表  
1. 行内样式：  
直接在标签里面添加style属性来添加样式。(不建议使用)  
如：  
<div class="div1" style="width: 100px; height:    
100px;background-color: red;">

2.  内部样式表：  
在head添加style标签来写样式。  
如：  
\*\{  
margin: 0;  
padding: 0;  
\}

3.  外部样式表：  
通过link—方式来引入外部样式表。  
如：  
<link rel="stylesheet" href="css/mycss.css"/>

二. 选择器  
1.  标签选择器(所有的标签)  
如：  
div\{  
width: 100px;  
height: 100px;  
background-color: red;  
\}

2.  类选择器  
如：  
.div1\{  
width: 17px;  
height: 20px;  
background-image: url("img/1.gif");  
background-position: 0px -20px;  
float: left;  
\}

3.  id选择器  
如：  
\#div3\{  
     background-color: red;  
\}

4.  交集选择器  
如：  
div.c2\{  
width: 100px;  
     height: 100px;  
     background-color: red;  
\}

5.  并集选择器  
如：  
div,p,h1\{  
width: 100px;  
     height: 100px;  
     background-color: green;  
\}

6.  后代选择器  
如：  
div p\{  
     width: 100px;  
     height: 100px;  
     background-color: green;  
\}

7.  通配选择器：\*（原子化）  
如：  
\*\{  
margin: 0;  
padding: 0;  
\}

三. 字体  
1.  改变字体大小  
如：  
font-size: 30px;  
   
2. 字体类型  
如：  
font-family: "微软雅黑","楷体";  
   
3. 加粗  
如：  
font-weight: bolder;  
   
4. 字体样式(斜体)  
如：  
font-style: italic;  
   
5. 字体颜色  
如：  
color: red;  
   
6. 文本对齐方式  
如：  
text-align: center;  
   
7. 行高（垂直居中让行高等于当前容器的高度）  
如：  
line-height: 300px;  
   
8. 字间距  
如：  
letter-spacing: 20px;

9. 文字加划线  
underline：下划线  
line-through：中划线  
overline：上划线  
如：  
text-decoration: underline;  
   
10. 文字缩进  
如：  
text-indent: 10px;  
   
四. 背景图  
1. 添加背景图  
如：  
background-image: url("img/star2.jpg");

2. 背景图平铺  
如：  
background-repeat: no-repeat;  
no-repeat:不平铺  
repeat-x:水平平铺  
repeat-y:垂直平铺  
   
3. 设置背景图大小  
  如：  
background-size: 1300px 1200px;  
background-size: 100% 100%;

①. 保持图片最大的属性和容器相同，剩下的截取，显示不全  
如：  
background-size: cover;

②. 保持图片最小的属性和容器相同，剩下的留白,保证图片完全在容器内  
如：  
background-size: contain;

4. 背景图偏移  
如：  
background-position: -27px 0px;

五. 列表（li）常用属性  
1. none：无风格  
如：  
list-style: none;  
结果：

2. disc：实心圆（<ul>默认样式）  
如：  
list-style: disc;  
结果：

3. circle：空心圆  
如：  
list-style: circle;  
结果：

4. square：实心正方形  
如：  
list-style: square;  
结果：

5. decimal：数字（<ol>默认样式）  
如：  
list-style: decimal;  
结果：

详细请查看我的笔记：

[http://note.youdao.com/noteshare?id=fbde2466c04383d8ed0055648a8454b0&sub=982F3BF3CE8544088EB91C1AA562727D][http_note.youdao.com_noteshare_id_fbde2466c04383d8ed0055648a8454b0_sub_982F3BF3CE8544088EB91C1AA562727D]

[http_note.youdao.com_noteshare_id_fbde2466c04383d8ed0055648a8454b0_sub_982F3BF3CE8544088EB91C1AA562727D]: http://note.youdao.com/noteshare?id=fbde2466c04383d8ed0055648a8454b0&sub=982F3BF3CE8544088EB91C1AA562727D