CSS入门-基本用法
body{font-size:12px,color:#333;}
body:选择符(Selector),网页标签名.
font-size:属性(Property).
12px:属性值(Value).
color:属性.
#333:声明(Declaration).
Selector:选择器高速浏览器改样式将作用于页面中哪些对象, 这些对象可以是某个标签,所有网页对象, 制定Class或ID值等.浏览器在解析这个样式时,根据选择器来渲染对象的显示效果.
Property:属性是CSS提供的设置好的样式选项, 属性名是一个单词或多个单词组成,多个单词之间通过连字符相连.这样能够直观表示属性所要设置样式的效果.
Declaration:声明可以增加一个或者无数个, 这些声明命令浏览器如何去渲染选择器指定的对象, 声明必须包括两部分:属性和属性值.并用分号来小时一个声明的结束, 在一个样式中最后一个声明可以省略分号.所有声明被放置在一对大括号内, 然后整体紧邻选择器的后面.
Value:属性值是用来显示属性效果的参数, 它包括数值和单位, 或者关键字.
1,行内样式
【代碼】
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>HTML</title> 7 </head> 8 <body> 9 <p style="background-color: #999900;">控制段落1</p> 10 <h2 style="background-color: #FF6633;">H2标题元素</h2> 11 <p style="background-color: #999900;">控制段落2</p> 12 <strong style="font-size: 30px;">strong比em效果要强</strong> 13 <div style="background-color: #66CC99;color: #993300;height: 30px;line-height: 30px;"> 14 div块级元素 15 </div> 16 <em style="font-size: 2em;">em强调</em> 17 </body> 18 </html>
行内样式有HTML元素的style属性, 即将CSS代码放入style=""引号内.
Background-color:设置背景颜色.
font-size: 标签设置字体大小.
【效果圖】
2,内嵌式
内嵌式通过将CSS卸载网页元文件的头部, 即在<head>和</head>之间, 通过使用HTML标签中的<style>标签将其包围. 该样式只能在此页面使用,解决行内样式多次书写的弊端.
【代碼】
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title></title> 7 <style> 8 p { 9 text-align: left; /* 文本左对齐 */ 10 font-size: 18px; /* 字体大小18像素 */ 11 line-height: 25px; /* 行高20 */ 12 text-indent: 2em; /* 首行缩进2个文字大小空间 */ 13 width: 500px; /* 段落宽度500 */ 14 margin: 0 auto; /* 浏览器居中 */ 15 margin-bottom: 20px; /* 段落下边距20 */ 16 } 17 </style> 18 </head> 19 <body> 20 <p>从创立之初，百度便将“让人们最平等便捷地获取信息，找到所求”作为自己的使命，成立以来，公司秉承“用户至上”的理念，不断坚持技术创新，致力于为用户提供“简单可依赖”的互联网搜索产品及服务，其中包括:以网络搜索为主的功能性搜索;以贴吧为主的社区搜索，针对各区域、行业所需的垂直搜索;以及门户频道、IM等，全面覆盖了中文网络世界所有的搜索需求。根据第三方权威数据，在中国，百度PC端和移动端市场份额总量达73.5%，覆盖了中国97.5%的网民，拥有6亿用户，日均响应搜索60亿次。</p> 21 <p>在面对用户的搜索产品不断丰富的同时，百度还创新性地推出了基于搜索的营销推广服务，并成为最受企业青睐的互联网营销推广平台。目前，中国已有数十万家企业使用了百度的搜索推广服务，不断提升着企业自身的品牌及运营效率。 22 为推动中国数百万中小网站的发展，百度借助超大流量的平台优势，联合所有优质的各类网站，建立了世界上最大的网络联盟，使各类企业的搜索推广、品牌营销的价值、覆盖面均大面积提升。与此同时，各网站也在联盟大家庭的互助下，获得最大的生存与发展机会。</p> 23 </body> 24 </html>
【效果圖】
3,链接式
【代碼】
<lianjie01.CSS>
1 h3 { 2 font-weight: normal; /* 取消标题默认加粗效果 */ 3 background-color: #66CC99; /* 设置背景色 */ 4 height: 50px; /* 设置标签的高度 */ 5 line-height: 50px; /* 设置标签的行高 */ 6 } 7 8 span { 9 color: #FF0000; /* 字体颜色 */ 10 font-weight: bold; /* 字体加粗 */ 11 }
<lianjie02.CSS>
1 p { 2 color: #FF3333; 3 /* 字体颜色 */ 4 font-weight: bold; 5 /* 字体加粗 */ 6 border-bottom: 3px dashed #009933; 7 /* 设置下边框线 */ 8 line-height: 30px; 9 /* 设置行高 */ 10 }
<HTML>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title></title> 7 8 <link href="css/lianjie01.css" type="text/css" rel="stylesheet" /> 9 <link href="css/lianjie02.css" type="text/css" rel="stylesheet" /> 10 11 </head> 12 <body> 13 <p>我是被lianjie02.CSS文件控制的,楼下的你呢?</p> 14 <h3> 楼上的 ,<span>lianjie01.CSS</span>文件给我穿的新衣服.</h3> 15 </body> 16 </html>
【效果圖】
4,导入样式
导入样式使用@import玲玲导入外部样式表.如:
@import urldaoru.CSS;
@import url'daoru.CSS';
@import url"daoru.CSS";
@import url(daoru.CSS);
@import url(daoru.CSS);
@import url("daoru.CSS");
【代碼】
<daoru.css>
1 @import url("css/lianjie02.css"); 2 3 p { 4 text-indent: 3em; 5 }
<HTML>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title></title> 7 <style type="text/css"> 8 @import url(css/lianjie01.css); 9 @import url(css/daoru.css); 10 body{background-color: #e4e929;} 11 </style> 12 </head> 13 <body> 14 <p>我是被lianjie02.CSS文件控制的,楼下的你呢?</p> 15 <h3> 楼上的 ,<span>lianjie01.CSS</span>文件给我穿的新衣服.</h3> 16 </body> 17 </html>
【效果圖】
<link>标签
<link href="css/lianjie01.css" type="text/css" rel="stylesheet" />
href:定义样式表文件URL;
type:定义导入文件类型;
rel:用于定义文档关联, 这里表示关联样式表.
浙公网安备 33010602011771号