css之基础及布局属性

css之基础及布局属性


1.CSS三种关联方式

行间样式
  如<p style=”color:#f00” >divcss8</p>
内联表方式
  

  (1):先在<head></head>之间加上<style>*********样式***********</style>

  (2):html里面采用选择器 调用所有的样式;

  <head>

  <style>
    div{color:red  font-weight:hold}
  </style>
  </head>
  <div></div>


  外联表方式

  • 外联表的原则:结构(html)与表现(css)进行分离
  • 在css文件夹里新建文件,写样式,在原html文件中写<link href=“css/css.css”rel=“stylesheet” type=“text/css”>  (放在head里面)

2.常用样式选择器

  <div>
  <p>文本</p>
  <div class=“body”></div>
  <div id=“top”></div>
  </div>

  • html标记符选择器:选择原页面上的元素;在css样式中 div{color:red; border:1px solid #000; 200px;height:200px;}
  • 有上下文关系的定义:div p{color:blue;}
  • 选择定义类(class)选择器:.body{color:yellow}   
  • id选择器:只能唯一存在;#top{color:pink}