CSS之基础篇

2018-08-30  本文已影响0人  忆往昔Code

                                 css基础

1:缩写方法:p{ color : #ff0000}===> p {color : #foo}。

2:两种方法实现rgb p{color : rgb(255,0,0);}==>p{color: rgb(100%,0%,0%)}

3:若干单词需要加引号 p{font-family: "snas serif"}

4:每行结束加分号。   p {

  text-align: center;

  color: black;

  font-family: arial;

}

5:单独css对大小写不敏感,但是和html一起工作涉及class和id名称大小是敏感的。

6:选择器分组:h1,h2,h3,h4,h5,h6{ color: green; } 同时命名标题都是一种颜色。

7:id 选择器id 选择器以 "#" 来定义。

#red{color:red;}

#green{color:green;}

html中 <p id = "red">这个段落是红色。</p>

8:CSS 类选择器   .center{text-align: center}

html中 <h1 class = "center">

         This heading will be center-aligned

          </h1>

和 id 一样,class 也可被用作派生选择器:.fancy td{color: #f60;background: #666;}

元素也可以基于它们的类而被选择:td.fancy{color: #f60;background: #666;}

9:CSS 属性选择器-对带有指定属性的 HTML 元素设置样式。

10:外部样式表   浏览器会从文件 mystyle.css 中读到样式声明,并根据它来格式文档。

<head>

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

</head>

内部样式表 

hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");}hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");}<head>

<style type = "text/css">

p{margin-left:20px;}

body{background-image:url("images/backs......gif");}

</style>

</head>

内联样式

<p style = "color: sienna;margin-left:20px">

This is a paragraph

</p>

11:即颜色属性将被继承于外部样式表,而文字排列(text-alignment)和字体尺寸(font-size)会被内部样式表中的规则取代。以内部样式为主。

hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");}

上一篇 下一篇

猜你喜欢

热点阅读