CSS入门（css 基本教程）

最新推荐文章于 2024-06-17 22:09:44 发布

kiki113

最新推荐文章于 2024-06-17 22:09:44 发布

阅读量1.2k

点赞数

分类专栏： jscript/html 文章标签： css html div class stylesheet import

本文链接：https://blog.csdn.net/kiki113/article/details/1641256

版权

jscript/html 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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>