码迷,mamicode.com
首页 > Web开发 > 详细

前端css学习_Day15

时间:2017-02-13 23:55:01      阅读:355      评论:0      收藏:0      [点我收藏+]

标签:选择器   技术   文件   images   com   charset   body   html   通用   

CSS基本概念

技术分享

技术分享

css语法结构

每个css由两部分组成:选择器和声明,声明又包括属性和属性值(json格式key:value)

选择器

有如下几种:

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css爱之初体验</title>
 6     <style type="text/css">
 7         #show2{color:gold;font-size: 40px}
 8         .s1{color: red;font-size: 15px}
 9         span{color: #0000cc;font-size: 20px}
10         .s2 span{
11             color: #05B2D2;font-size: 40px;
12         }
13         p,h1,a{color: #0000cc;font-size: 5px}
14          #show1{color:gold;}
15             .show {color:pink;}
16             h1 {color:red;}
17             * {color:green;} <!--通用选择器-->
18 </style>
19 </head>
20 <body>
21 <!--行内样式-->
22 <div style="color: red;font-size: 35px">css第一部分</div>
23 <!--标签选择器-->
24 <span>css爱之初体验1</span>
25 <!--id选择器-->
26 <div id="show2">css爱之初体验2</div>
27 <!--类选择器-->
28 <div class="s1">css爱之初体验3</div>
29 <!--包含选择器-->
30 <div class="s2">
31     <span>css爱之初体验4</span>
32     <a>css爱之初体验5</a>
33 </div>
34 <!--分组选择器-->
35 <p>css爱之初体验6</p>
36 <h1>css爱之初体验7</h1>
37 <a>css爱之初体验8</a>
38 <div>css爱之初体验9</div>
39 <!--行内样式>id选择器>类选择器>标签选择器>通用选择器-->
40 <h1 id="show1" class="show" style="color:gray;">这是选择器优先级测试</h1>
41 </body>
42 </html>

样式表

内部样式和行内样式,上文已写。

外部样式:

使用内容样式容易和html代码混淆,我们单独把样式内容单独写入一个文件,叫外部样式,使用link标签引入。如下:

<head>
    <meta charset="UTF-8">
    <title>css爱之初体验</title>
    <link href="a.css" type="text/css" rel="stylesheet">
</head>

 

前端css学习_Day15

标签:选择器   技术   文件   images   com   charset   body   html   通用   

原文地址:http://www.cnblogs.com/liumj0305/p/6395729.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!