网页平面设计 CSS案例源码-职坐标

网页平面设计 CSS案例源码

晓晓 2018-03-12 来源：网络阅读 880 评论 0

摘要：网页平面设计 CSS

网页平面设计 CSS

1、在html中引入css的方法

　　1.行内式

　　行内式即在标记的style属性中设定CSS样式，这种方式本质上没有体现出CSS的优势，因此不推荐使用。　　

　　例如：<h1 style="属性名称:属性值;">这是一行文本/h1>

　　2.嵌入式

　　嵌入式将对页面中各种元素的设置写在<head></head>之间。

　　例如：

<head>
　　　　　　　　<style type="text/css">
　　　　　　　　　　 h1{
　　　　　　　　　　　　color:white;
　　　　　　　　　　　　background-color:blue;
　　　　　　　　　　　　}
　　　　　　　　</style>
　　　　　　</head>

　　3.导入式

<style type="text/css">
　　　　@import"mystyle.css";        >>要有style标签，import引用
　　</style>

　　4.链接式

　　和导入式差不多，都是引用外部样式表。导入式：先加载html在加载css。链接式：同步加载

　<head>
　　　　<link href="mystyle.css" rel="stylesheet" type="text/css" />          >>stylesheet样式表，rel指定你引入的是样式表
　　</head>
 
　　外部css样式表，后缀名为.css
　　@charset "UTF-8"         >>编码格式，"UTF-8"用于国际，"GBK"用于国内
　　/*css*/            >>css样式表的注释
　　p {
　　　　color:red;
　　　　background:silver;
　　　　}
　　h1 {
　　　　color:white;
　　　　font-size:25px;
　　　　}
　　...

　　5.标签选择器

　　一标签的名字作为css样式的名字，比如：h2，p

　　标签选择器会控制页面所有同类标签的样式，不能做到同样的标签显示不同的样式

　　6.类别选择器

　　在css样式表用"."声明，比如：.p1{...}; >>class可以多次引用

　　以标签的css属性为基础来做的一个选择器

　　<p class="p1">...</p>

　　7.ID选择器

　　在css样式表用"#"声明，比如：#p1{...}; >> id一个页面只可以使用一次

　　<p id="p1">...</p>

　　8.交集选择器

 1 <html>
 2     <head>
 3         <title>交集选择器</title>
 4         <style type="text/css">
 5             p{color:blue;}
 6             .class12{color:green;}
 7             p.class12{color:red;}
 8         </style>
 9     </head>
10     <body>
11         <p>p段落</p>
12         <p class="class12">交集段落</p>    <!--只有是<p>标签并且class属性和交集处一样才能应用到交集的样式-->
13         <h3 class="class12">h3段落</h3>    <!--这里不是<p>标签，所以应用的是类别选择器处的样式-->
14     </body>
15 </html>

　9.并集选择器

　　并集选择器用","隔开标签

 1 <html>
 2     <head>
 3         <title>并集选择器</title>
 4         <style type="text/css">
 5             p,h1,h4,a{color:silver;font-size:20px;}   <!--同时给多个标签添加样式-->
 6         </style>
 7     </head>
 8     <body>
 9         <p>p段落</p>
10         <h1>h1段落</h1>
11         <h4>h4段落</h4>
12         <a href="#">超链接</a>
13     </body>
14 </html>

　　10.后代选择器

　　后代选择器用空格隔开，找父元素下的子元素的子元素添加样式

1 <html>
 2     <head><title>后代选择器</title>
 3         <style type="text/css">
 4             ol,h1,p{font-size:50px;} 
 5             ol li li{color:red;} 
 6             ol li ul .class123{color:skyblue;}
 7             ol #id123{color:purple;}
 8             p b{color:blue;}
 9         </style>
10     </head>
11     <body>
12         <ol>
13             <li>无序列表
14                 <ul>
15                     <li>子列表</li>
16                     <li class="class123">子列表</li>
17                     <li>子列表</li>
18                 </ul>
19             </li>
20             <li>无序列表</li>
21             <li id="id123">无序列表</li>
22         </ol>
23         <h1>h1段落</h1>
24         <p><b>加粗段落</b></p>
25     </body>
26 </html>

css的层叠性：行内样式>ID样式>类别样式>标记样式

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标设计创作之平面设计频道！

广告创意经典案例平面设计需要学什么平面广告设计分类

本文由 @晓晓发布于职坐标。未经许可，禁止转载。