CSS

css:指的是Cascading Style Sheets,即层叠样式表,它是一种设计网页样式及布局的技巧。所谓“层叠”,实际上指的是将显示样式与显示内容分离。

css的基本语法

     css由三部分组成:选择符(selector) 属性(properties)属性的值(value)。

selecor{

property1:values;

……

……

propertyN:values

}

用户将上式样式表定义用一对<style>标签加入到html文件中,样式表对当前文件有效,此种用法成为内联样式表。

例子:

<!DOCTYPE html>
<html>
  <head>
    <title>cssuse.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
     <style type="text/css">
     body{
     background-color: yellow
     }
     h1,h2,p{
     background-color:#00F00;
     color:red
     }
     </style>
  </head>  
  <body>
    This is the body content <br/>
    <h1>this is the H1 content</h1>
    <h2>this is the H2 content</h2>
    <p>this is the P content</p>
  </body>
</html>

css选择符:html选择符,类选择符,id选择符。

html选择符重点:HTML标签作为css选择符,HTML选择符之后是对应元素的属性及属性值,如属性值有多个单词组成,必须加上引号才可以被识别。

类选择符重点:在选择符之前需要加一个实心圆点,表示选择符的类型是类选择符。

格式:

selctor.classname{

property1:value;

…………

}

<!DOCTYPE html>
<html>
  <head>
    <title>css.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  <style type="text/css">
    .one {
      color:red;
      font-size:12pt;
    }
    .tow{
    color:green;
    font-size:14pt;
    }
    .three{
    color:#800080;
    font-size:16pt;
    }
  </style>
  </head>
  <body>
  <h1 class=one>这是引用one类样式的标题</h1>
  <p class=one>这是引用one类样式的段落</p>
  <p class=tow>这是引用one类样式的段落</p>
  <p class=three>这是引用one类样式的段落<p>
  </body>
</html>

id选择符:当需要为某个元素单独设计时,可以使用id选择符。使用id选择符要先为设计样式的对象定义一个id属性。id选择符是唯一的,不同元素的id值不可以重复。

因为id选择符占用元素的id属性,因此要避免少用。

 

<!DOCTYPE html>
<html>
  <head>
    <title>cssid.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
 <style type="text/css">
   #top{
   color:blue;
   font-size:18pt;
   font-family:黑体;
   background-color:#FFB6C1;
   }
  </style>
  </head>
  <body>
  <div id="top">
    A<br/>
    B<br/>
    C<br/>
    D<br/>
  </div>
  </body>
</html>

css继承:当标签具有嵌套关系时,内部标签自动拥有外部标签的不冲突的样式的性质。其中border书姓没有继承性。

css的使用方式:内嵌方式,内部样式表,使用<link>标签链接外部样式表。

 

 

 

原文地址:https://www.cnblogs.com/gaochunhui/p/11053910.html