欢迎光临
我的个人博客网站

CSS小记


CSS小记

1.CSS简介

CSS(Cascading Style Sheet)层叠样式表;决定了如何显示HTML元素;由W3C创造

1. 特点

  1. 样式通常储存在样式表中
  2. 外部样式表通常存储在 css文件中
  3. 多个样式定义可层叠为一

2. 引入方式

  1. 行内式:即标签中用style标签设定css样式(不推荐)

  2. 内嵌式:在成对的head标签中嵌入style标签(对于多个网页,若修改样式麻烦)

  3. 导入式

    将一个独立的.css文件引入html文件中,导入式使用css规则引入外部css文件

    <head> 	<style type="text/css"> 		@import"mystyle.css"; 	</style> </head>     

    缺点:导入式会在整个网页装载完后再装载css文件;这就造成了一个问题

    ​ 若网页比较大则会出现先显示无样式的页面,闪烁一下之后,再出现网页的样式

  4. 链接式

    此方式 也是将一个.css文件引入到html文件中,但它与导入式不同的是使用html规则引入外部css文件

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

    优势:在网页文件主体装载前装载完成,显示出的网页一开始就是带样式效果的

3. 层叠次序(优先级)

问:当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?

答:一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字4拥有最高优先级

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表(位于head标签内部)
  4. 内联样式(在html文档的元素标签内部)

2. CSS语法

1. 基础语法

  1. 简介

    css规则由两个主要的部分构成:选择器以及一条或者多条声明

    选择器通常是您需要改变样式的html元素

    每一条声明由一个属性和一个值组成

    CSS小记

  • 注意:

    1. 若值为若干单词,则要给值添加引号

      p {font-family:"sans serif"} 
    2. css 对大小写不敏感;注意空格以便编辑

      body { 	color: #0000; 	margin: 0; 	padding: 0; } 

2. 高级语法

1. 选择器分组

h1,h2,h3,h4,h5,h6{   /*用逗号隔开*/ 	color:green; } 

2.继承

子元素从父元素继承属性

body {     font-family:Verdana,sans-serif; } /*body里面的所有子元素都使用 Verdana字体*/ 

若要摆脱继承,可以独立创建一个针对某标签的特殊规则

body {     font-family:Verdana,sans-serif; } p {    font-family:Times,"Times New Roman",serif;  } 

3. 选择器分类

1. id 选择器
<html lang="zh_CN">     <head>         <meta charset="UTF-8">         <style type="text/css">             #red {color: red;}             #green {color: green;}         </style>     </head>     <body>         <p id="red">这个段落是红色</p>         <p id="green">这个段落是绿色</p>     </body> </html> 
2. class 选择器
<html lang="zh_CN">     <head>         <meta charset="UTF-8">         <style type="text/css">             .center {                 text-align: center;             }         </style>     </head>     <body>         <h1 class="center">         	This heading will be center-aligned         </h1>                  <p class="center">         	This paragraph will also be center-aligned         </p>     </body> </html> 

class选择器和派生选择器

.fancy td {     color: #f60;     background: #666 } /*在上述列子中,类名为fancy的更大的元素内部的表格单元都会以灰色背景显示橙色文字 	(名为fancy的更大元素可能是一个表格或div)*/ 

元素也可以基于它们的类而被选择

td.fancy{     color: #f60;     background: #666;  } <!--在上述列子中,类名为fancy的表格单元将是带有灰色背景的橙色文字 	仅仅作用于td元素下的.fancy类--> 
3. 派生选择器

通过依据元素在其位置的上下文关系来定义样式,使标记更加简洁

<html lang="zh_CN">     <head>         <meta charset="UTF-8">         <style type="text/css">             li strong {                 font-style: italic;                 font-weight: normal;             }         </style>     </head>     <body>         <p>             <strong>             	我是粗体字             </strong>         </p>         <ol>             <li>                 <strong>                 	我是斜体字,这是因为我是在li列表中                 </strong>             </li>             <li>             	我是正常字体             </li>         </ol>     </body> </html> 

id选择器和派生选择器

在现代布局种,id选择器常常用于建立派生选择器

<html lang="zh_CN">     <head>         <meta charset="UTF-8">         <style type="text/css">             #sidebar p {                 font-style: italic;                 text-align: right;                 marign-top: 0.5em;                 color:red;             }         </style>     </head>     <body>         <p id="sidebar">这个段落是红色</p>         <p id="green">这个段落是绿色</p>     </body> </html> 
4. 属性选择器

对带有指定属性的html元素设置样式

[title] { 	color: red; } 

属性和值选择器(单个值)

[title="W3School"] {     border: 5px solid blue; } 

属性和值选择器(多个值)

<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <style type="text/css"> [title~=hello]       /*适用于由空格分隔的属性值*/ { color:red; }  </style> </head>  <body> <h1>可以应用样式:</h1> <h2 title="hello world">Hello world</h2> <p title="student hello">Hello W3School students!</h1> <hr />  <h1>无法应用样式:</h1> <h2 title="world">Hello world</h2> <p title="student">Hello W3School students!</p> </body> </html> 
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <style type="text/css"> [lang|=en]				/*适用于由连字符分隔的属性值*/ { color:red; } </style> </head>  <body> <h1>可以应用样式:</h1> <p lang="en">Hello!</p> <p lang="en-us">Hi!</p> <hr />  <h1>无法应用样式:</h1> <p lang="us">Hi!</p> <p lang="zh">Hao!</p> </body> </html> 

常用场景设置表单的样式

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> input[type="text"] {   width:150px;   display:block;   margin-bottom:10px;   background-color:yellow;   font-family: Verdana, Arial; }  input[type="button"] {   width:120px;   margin-left:35px;   display:block;   font-family: Verdana, Arial; } </style> </head> <body>  <form name="input" action="" method="get"> <input type="text" name="Name" value="Bill" size="20"> <input type="text" name="Name" value="Gates" size="20"> <input type="button" value="Example Button">  </form> </body> </html> 
5. 后代选择器

后代选择器亦包含选择器;可以选择作为某元素后代的元素

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> h1 em {color:red;}     /* 元素em为h1的后代;两元素的层次间隔是无限的 */ </style> </head>  <body> <h1>This is a <em>important</em> heading</h1> <p>This is a <em>important</em> paragraph.</p> </body> </html> 
6. 子元素选择器

如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,用此选择器

子结合符( > )

<!DOCTYPE html> <html> <head> <style type="text/css"> h1 > strong {color:red;}   /*这个规则会把第一个h1下面的两个strong元素内容变红色,其它则不受影响*/ </style> </head>  <body> <h1>This is <strong>very</strong> <strong>very</strong> important.</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1> </body> </html> 
7. 相邻兄弟选择器

如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可用此选择器

相邻兄弟结合符( + )

注意:用一个结合符只能选择两个相邻兄弟中第二个元素

<!DOCTYPE html> <html> <head> <style type="text/css"> li + li {font-weight:bold;} /*上面这个选择器只会把列表中的第二个和第三个列表项变为粗体;第一个列表项不受影响*/ </style> </head>  <body> <div>   <ul>     <li>List item 1</li>     <li>List item 2</li>     <li>List item 3</li>   </ul>   <ol>     <li>List item 1</li>     <li>List item 2</li>     <li>List item 3</li>   </ol> </div> </body> </html> 

结合其它结合符例子

html>body table + ul{     margin-top: 20px; } /*解释:选择紧接在table元素后的所有兄弟ul元素,该table元素包含在一个body元素中,body元素本身也是html元素的子元素*/ 

4. 伪类

css伪类 ( pseudo-classes)用于 向某些选择器添加特殊 的效果

  1. 语法

    selector/selector.class : pseudo-class{ 	property: value; } 
  2. 锚伪类

    链接的不同状态分别以不同的方式显示(对大小写不敏感)

    a:link {color: #FF0000}			/*未访问的状态*/ a:visited {color: #00FF00}		/* 已访问的状态*/ a:hover {color: #FF00FF}		/*鼠标移动到链接上的状态*/ a:active {color:#0000FF}		/*选定的链接*/  /*注意顺序,必须按照上面的顺序,否则无效*/ 
  3. 伪类与css类配合使用

    a.red : visited{     color:#FF0000; } <a class="red" href="css_syntax.asp">CSS Syntax</a>  /*假如上面的列子中的链接被访问过,那么它将显示为红色*/ 

5. 伪元素

伪元素(pseudo-element)用于向某些选择器设置特殊效果

  1. 语法

    selector/selector.class : pseudo-element{ 	property: value; } 
  2. after伪元素

    可以在元素的内容后面插入新内容

    <!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <style type="text/css"> h1:before {     content:url(/i/w3school_logo_white.gif) } </style> </head>  <body> <h1>This is a heading</h1> <p>The :before pseudo-element inserts content before an element.</p> <h1>This is a heading</h1> <p><b>注释:</b>如果已规定 !DOCTYPE,那么 Internet Explorer 8 (以及更高版本)支持 content 属性。 </body> </html> 

    效果: CSS小记

  3. 反之before伪元素是插在元素内容前面

3. 常用CSS

后续跟进……

赞(0) 打赏
未经允许不得转载:张拓的天空 » CSS小记
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏