css样式

css样式

CSS(Cascading Style Sheets) 美化样式

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

引入CSS样式表（书写位置）

  • CSS可以写到那个位置？
  • 是不是一定写到html文件里面呢？

1.行内式（内联样式）

  • 内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
<h3 style="color:pink; font-size: 25px;">注册</h3>

运行结果

语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。

2.内部样式表

  • 内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：
1 <head>
2     <meta charset="UTF-8">
3     <title>css内部样式</title>
4     <style type="text/CSS">
5         选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
6     </style>
7 </head>
  • 语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。
  • type="text/CSS" 在html5中可以省略， 写上也比较符合规范， 所以这个地方可以写也可以省略。
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>css内部样式</title>
 7     <style>
 8         th {
 9             color: skyblue;
10         }
11 
12         td {
13             font-size: 14px;
14         }
15 
16         tr {
17             height: 30px;
18         }
19 
20         caption {
21             color: deeppink;
22             font-size: 30px;
23         }
24     </style>
25 </head>
26 
27 <body>
28     <table border="1" cellspacing="0" cellpadding="0" align="center" width="500">
29         <caption>小说排行榜</caption>
30         <tr>
31             <th>排名</th>
32             <th>关键词</th>
33             <th>趋势</th>
34             <th>今日搜索</th>
35             <th>最近七日</th>
36             <th>相关链接</th>
37         </tr>
38 
39         <tr>
40             <td>1</td>
41             <td>钢铁是怎样炼成的</td>
42             <td>↓</td>
43             <td>321</td>
44             <td>123</td>
45             <td>
46                 <a href="#" target="_blank" rel="noopener noreferrer">贴吧</a>
47                 <a href="#" target="_blank" rel="noopener noreferrer">图片</a>
48                 <a href="#" target="_blank" rel="noopener noreferrer">百科</a>
49             </td>
50         </tr>
51     </table>
52 </body>
53 
54 </html>

运行结果

3.外部样式表（外链式）

  • 链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中.
  • 其基本语法格式如下： 
1 <head>
2     <link href="CSS文件的路径"  rel="stylesheet" />
3 </head>
  • 注意： link 是个单标签哦!!!
  • 该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：
  1. href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
  2. type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
  3. rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

aa.css

1 div {
2     color: deeppink;
3     font-size: 25px;
4 } 

css外部样式.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>css外部样式</title>
 7     <link rel="stylesheet" href="../css/aa.css">
 8 </head>
 9 
10 <body>
11     <div>前端工程师</div>
12     <div>后台工程师</div>
13     <div>全栈工程师</div>
14 </body>
15 
16 </html>

运行结果

4.三种样式表总结(位置)

5.css样式规则

  • 使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，
  • 具体格式如下：

  • 在上面的样式规则中:
  1. 选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
  2. 属性和属性值以“键值对”的形式出现。
  3. 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
  4. 属性和属性值之间用英文“:”连接。
  5. 多个“键值对”之间用英文“;”进行区分。

 

 

posted on 2019-01-20 09:51  jaydenjune  阅读(79)  评论(0)    收藏  举报

导航