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

Day2_CSS_CSS语法及HTML结合

时间:2015-08-11 01:37:22      阅读:120      评论:0      收藏:0      [点我收藏+]

标签:标签   最好   


CSS语法及HTML结合

二、CSS语法

 p{color:red;}

 

 选择器{属性名:属性值 ;}

     选择器后一定是大括号.属性名后必须用冒号隔开.属性值后用分号

     属性名和冒号之间最好不要有空格。

     CSS注释/*     */

使用选择器p{ }和<p>标签的区别:

 p{

font-weight:bold;

font-style:italic;

}

</style>

 </head>

 <body>

<p>你好</p>

<p>你好</p>

<p>你好</p>

<p style = "color:red">你好</p>

三、CSS和HTML的结合方式

 CSS代码理论上位置是任意的,但通常写在style标签里

 CSS和HTML的结合方式有3种:

  a. 行级样式表:采用style属性,范围只针对此标签适用

    <div style = "border:1px solid red ;">大家好</div>

  b. 内嵌样式表:采用<style>标签完成。范围针对此页面

<style type="text/css">

  c. 外部样式表: 采用建立样式表文件。针对多个页面.

   引入样式表文件的方式:

    1):采用<link>标签

     eg:<link rel = "stylesheet" type = "text/css" href = "a.css"></link>

        <link rel = "stylesheet" type = "text/css" href = "a.css"></link>

    2):采用import,必须写在<style>标签中,并且必须是第一句

     eg: @import url(a.css) ;

       

    两种引入方式的区别:

      外部样式表中不能写<link>标签,但是可以写import语句


<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <link rel = "stylesheet" type = "text/css" href = "a.css"></link>

  <title>Document</title>

<style type="text/css">

 /*

 CSS和HTML的结合方式:

  1. 行级样式表: 采用style属性完成

  2. 内部样式表: 采用style标签完成

  3. 外部样式表: 采用外部css文件完成

 */

p{

font-weight:bold;

font-style:italic;

}

</style>

 </head>

 <body>

<p>你好</p>

<p>你好</p>

<p>你好</p>

<p style = "color:red">你好</p>

 </body>

</html>




本文出自 “与君共勉” 博客,请务必保留此出处http://rickyigoogle.blog.51cto.com/8747999/1683443

Day2_CSS_CSS语法及HTML结合

标签:标签   最好   

原文地址:http://rickyigoogle.blog.51cto.com/8747999/1683443

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