CSS入门（css 基本教程）

CSS入门

CSS简介

v 概念

Cascading Style Sheets ,层叠样式表

v 功能

v 基本语法

CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value），基本格式如下：
selector {property: value} ，如 body {color: black}

CSS 的几种设置方式

v 内联样式表（Inline style sheets）

v 嵌入样式表（embedded style sheets）

v 链接样式表（linked style sheets）

v 引入样式表（imported style sheets）

v 内联样式表

<p style="margin-left: 0.5in; margin-right:0.5in">这一行被增加了左右的外补丁</p>

<table id="Table2" style="FONT-SIZE: 12px" cellSpacing="0" cellPadding="0" width="300"

align="center" border="0"> </table>

缺点：同样的设置风格无法重用，重复大量工作

v 嵌入样式表

缺点：只能统一同一页面上相同的标签风格，不同页面上风格相同的标签元素必须在每个页面上都嵌入样式表

v 链接样式表

编写一个样式表文件：filename.css

v 输入样式表

利用@import声明语句将一个外部css文件输入到另外一个css文件中，被输入的css文件中的样式规则就成了输入的css文件中规则的一部份，也可将外部css文件输入到网页中，如：

<style type="text/css">
<!--

@import url(http://www.it315.org/style.css);

@import url(/stylesheets/style.css);

p {font: 10pt/12pt "Arial"; color: black}

-->
</style>

样式规则选择器

v Html 选择器

v Class 选择器

v ID 选择器

v 关联选择器（包含选择符）

v 组合选择器

v 伪元素选择器

Class Selector

l 可将一种Html标签所创建的各个网页元素分成几类，就可以将该Html标签的class属性设置为不同的值，如：

　　<p class=“stop”>paragraph1</p>

<p class=“warning”>paragrapht2</p>

l 在样式表中，可以分别为某个Html标签的各个类别定义样式规则：

　　<style>

p.stop {color:red}

p.warning {color:yellow}

</style>

l 在样式表中，可以为某个类别的所有Html标签定义样式规则：

<style>

.blueone {color:blue}

</style>

<h1 class=“blueone”>蓝色的题目</h1>

<p class=“blueone”>蓝色的段落</p>

ID Selector

l ID属性用来定义某一个特定的Html元素，一个网页文件中只能有一个元素的实用某一ID属性值，ID Selector就是为样式规则定义语句选择具有某一ID属性值的Html元素，如

l 在样式表中，ID值为yellowone的html元素的样式规则定义语句如下：

<style>

#yellowone {color:yellow}

</style>

注：ID Selector一般用于div的较多

关联选择器和组合选择器

l 关联选择器是指用一个空格隔开的两个或更多个的单一选择器组成的字符串，如：

　　table a { font-size: 12px }
在表格内的链接改变了样式，文字大小为12像素，而表格外的链接的文字仍为默认大小

l 关联选择器定义的样式规则比一般定义的样式规则优先权高

l 组合选择器

在一条样式规则中定义组合若干个选择器，选择器间用逗号隔开，减少重复定义，如：

h1,h2,h3,h4,h5,td 13{color:red}

伪元素选择器

l 伪元素选择器是指同一个Html元素的各种状态和其所包含的部分内容的一种定义方式使用伪元素选择器定义格式

html元素：伪元素 {属性：值}

l 常用的伪元素

　　　A:active 选中状态

A:hover 光标移动到超链接时的状态

A:link 超链接标签的正常状态

A:visited 访问过的状态

P:first-line 段落的首行

P:first-letter 段落的首字母

l 类选择器与伪元素一起使用的格式

html元素.类名：伪元素 {属性：值}

样式规则的注释与有效范围

v 样式规则的注释

l 使用“/*注释的内容*/”格式进行注释，注释不能嵌套

v 样式规则的继承

l 所有嵌套在某个html标签中的html标签都会继承外层标签设置的样式规则

v 样式规则的优先级

l 从上到下，从整体到局部，优先级增强

l ID选择器>Class选择器>Html选择器

l 内联样式表>嵌入样式表>外部样式表

Div+CSS设计网页

v 结构化HTML网页

先思考页面内容的语义和结构,再考虑各元素“外观”

一般页面结构：

　　标志和站点名称
   主页面内容
   站点导航(主菜单)
   子菜单
   搜索框
   功能区(例如购物车、收银台)
   页脚(版权和有关法律声明)

利用ID选择器对应DIV定义HTML页面结构, DIV容器中可以包含任何内容块,也可以嵌套另一个DIV内容块可以包含任意的HTML元素---标题、段落、图片、表格、列表等。

DIV结构如下：
　　│body {}　/*这是一个HTML元素，具体我就不说明了*/
　　└#Container {}　/*页面层容器*/
　　　　　├#Header {}　/*页面头部*/
　　　　　├#PageBody {}　/*页面主体*/
　　　　　│　├#Sidebar {}　/*侧边栏*/
　　　　　│　└#MainBody {}　/*主体内容*/
　　　　　└#Footer {}　/*页面底部*/

CSS文件：

　/*基本信息*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}

　/*页面层容器*/
#container {width:100%}

　/*页面头部*/
#Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}

　/*页面主体*/
#PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00}

　/*页面底部*/
#Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF}

Html文件：

<div id="container">[color=#aaaaaa][/color]
　　<div id="Header">[color=#aaaaaa][/color]
　　</div>
　　<div id="PageBody">[color=#aaaaaa][/color]
　　　　<div id="Sidebar">[color=#aaaaaa][/color]
　　　　</div>
　　　　<div id="MainBody">[color=#aaaaaa][/color]
　　　　</div>
　　</div>
　　<div id="Footer">[color=#aaaaaa][/color]
　　</div>
</div>

CSS入门（css 基本教程）相关推荐

html中怎么写小箭头,HTML+CSS入门 CSS用伪类制作小箭头
本篇教程介绍了HTML+CSS入门 CSS用伪类制作小箭头,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 本文对轮播图左右按钮的处理方法一改往常,不是简单地用btn.pr ...
html的公共样式,HTML+CSS入门 CSS公共样式
本篇教程介绍了HTML+CSS入门 CSS公共样式,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < @charset "utf-8"; *{margin ...
html图片滚动红点_HTML+CSS入门 CSS头像右上角的红点
本篇教程介绍了HTML+CSS入门 CSS头像右上角的红点,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 说明: 1.主要用到position定位: 2.使用border ...
html font-family设置无效,HTML+CSS入门 CSS设置中文字体(font-family:黑体)后样式失效问题如何解决...
本篇教程介绍了HTML+CSS入门 CSS设置中文字体(font-family:"黑体")后样式失效问题如何解决,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. ...
浅谈对html css的理解,HTML+CSS入门 CSS选择器、属性和值浅谈
body { font-size: 0.8em; color: navy; } 上面的意思是为body选择器设置font-size字体大小和color字体颜色. 所以基本的,当它作用与HTML页面时, ...
html常用布局和写法,HTML+CSS入门 css常用布局多行多列解析
CSS布局常用的方法:float : none | left | right 取值: none : 默认值.对象不飘浮 left : 文本流向对象的右边 right : 文本流向对象的左边它是怎样工 ...
胖虎都看得懂的CSS入门
CSS入门 CSS是什么摘自维基百科层叠样式表(英语:Cascading Style Sheets,简写CSS),又称串样式列表.级联样式表.串接样式表.层叠样式表.階層式樣式表,一种用来为结构化 ...
菜鸟教程css事件,【推荐】DIV+CSS入门菜鸟教程
这篇文章主要为大家详细介绍了[推荐]DIV+CSS入门菜鸟教程,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编罗X来看看吧. CSS功能复杂多变,大多数新手莫不着 ...
HTML+CSS小白入门与进阶教程
HTML+CSS小白入门与进阶教程本文旨在让你快速了解HTML语法结构,通过实例操作快速从无到有的入门与进阶.Html语言学习的特点有点像刚开始学word软件,word的功能就像html标签,用多了 ...

CSS入门（css 基本教程）

CSS入门（css 基本教程）相关推荐

最新文章

热门文章