一、css样式表的分类

首先介绍一下css中的样式表  a、外部样式表  将需要的样式放在单独的外部文件中，需要使用是直接调用，通常放在.css文件中。例如：/*以下部分是放在（my.css）自定义名称的css文件中*/

h1,h2,h3{color:blue;}

h1{font-size:18px;}

h2{font-size:35px;}

p{font-size:10px;}

注意：.css文件中不需要写头文件等内容，直接开始写样式内容即可。

/*以下部分是在html中调用上面的.css文件*/

在<head></head>中间添加  <link rel="stylesheet" type="text/css" url="my.css (样式表的地址)"  />

b、嵌入式样式表

格式

<head>

<style type="text/css">  该处是嵌入的样式内容 ，例如 #id={color:red;}</style>

</head>

注意：文档的<style >段必须写在<head></head>之间，可以有多个<style >段。

c、内联样式表

例如：<h1 style="color:red;">红色的标题</h1>

该样式表仅用于某一部分网页元素，在新的web标准中，最好把样式放在<style>或者外部样式表文件中使用。

一个样式规则由一个选择器和一个申明块组成。

二、选择器的分类

1、元素选择器又称为类型选择器

例如：em{cloor:red;}

p{font-size:10px;}

即表示在<body>中所有的em元素的字体全部设置为红色，所有的段落<p>字体大小设置为10px.

2、类选择器(class属性)

语法格式：    .类名{属性：值}

例如：<html>

<head>

<title>类选择器使用</title>

<style>

.big {color:red}

</style>

<body>

<p class="big"></p>

</body>

</head>

</html>     /*该程序表示将段落p的字体颜色改为红色*/

3、ID选择器（与类选择器类似，即可被用于选择有ID属性的HTML元素）

语法：   #id名称 {属性：值；}

例如：在<style></style>之间写  #navigation {width:200px;color:#333;}

在主程序中  <body></body>中间即可调用上面的navigation    <div id="navigation"></div>

4、包含选择器

例如：em{color:red}

表示在整个程序中，所有em元素的字体均设置为红色；

p em {coloe:red}

仅仅表示段落<p>中的<em>元素字体设置为红色，而其他可能存在的<div>或者其他元素的字体颜色不变。

5、通配符选择器   （*）

通配符选择器用于选择所有元素

例如：    *{color:red;}

整个显示的页面字体设置均为红色。

6、伪类选择器（常使用的是与<a>元素相关的超级链接 伪类选择器）

a {}   不论链接状态如何，均可设置

a:link {}    用在未访问的链接的选择器

a:visited {}   用在已访问过的链接的选择器

a:hover {}     当鼠标放在访问地址上的链接的选择器

a:active {}    当鼠标点击访问地址是的链接的选择器

（上述的后面四种状态可 进行组合，但是顺序必须按照上面的顺序写）

a:link,a:visited {color:red;}

a:hover,a:active {color:blue;}

7、伪元素选择器

标准的选择器不能格式化一个元素的第一个字母或者第一行，而伪元素可以进行该操作；

在伪元素选择器中被所有浏览器支持的有两种：first-line    first-letter

p:first-line {font-weight:bold}      (段落的第一行)

p:first-letter {font-size:200%;font-weight:bold;}    （段落的第一个字母）

看这里啦：one:类选择器可以在一个文档内根据需要多次使用，而同一个ID选择器只能再文档中应用一次；

two:对于同一个HTML元素，可使用多个类选择器格式化，而只能使用一个ID选择器；

three:当类选择器与ID选择器的声明有冲突是，优先选择ID选择器的声明。

css 基础（一）的更多相关文章

  1. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  2. CSS基础总结

    CSS基础总结链接地址:http://segmentfault.com/a/1190000002773955

  3. CSS基础篇之了解CSS和它的基本属性

    CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...

  4. HTML5 -入门 (---css样式-------------（css基础与css选择器）---------------------—）

    ---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...

  5. css 基础---选择器

    1.css基础 selector {property: value} eg: h1 {color:red; font-size:14px;} p { text-align: center; color ...

  6. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  7. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  8. css基础不扎实

    写了两周的网页,发现自己的css基础还是很差的,当时培训学习的时候就发现了,我做的页面都特别的别扭和丑吧,在班级上应该是垫底的: 原先只知道用float,不会使用定位,网页连固定定位也不会,现在发现, ...

  9. css基础总结一

    最近在弄一个简单管理系统的前端,所以打算将做项目的一些个人感想以及总结简单罗列下,当然,主要针对前端的基础部分以及一些常用的前端个人简单技巧总结.主要分为js部分和css部分,下面是css的基础部分总 ...

  10. CSS基础教程 -- 媒体查询屏幕适配

    响应式布局 Media Query 的使用方法 在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更 ...

随机推荐

  1. iOS 纯代码适配iPhone6，6+

    链接地址:http://blog.csdn.net/codywangziham01/article/details/37658399 转自:http://www.maxiaoguo.com/cloth ...

  2. POJ 2689 Prime Distance（素数筛选）

    题目链接:http://poj.org/problem?id=2689 题意:给出一个区间[L, R],找出区间内相连的,距离最近和距离最远的两个素数对.其中(1<=L<R<=2,1 ...

  3. javascript模块化编程(转载)

    Javascript 模块化编程 作者: 阮一峰  发布时间: 2013-01-08 18:04  阅读: 7632 次  推荐: 40   原文链接   [收藏]   随着网站逐渐变成"互 ...

  4. R语言学习之主成分分析法的R实践

    主成分分析R软件实现程序(一): >d=read.table("clipboard",header=T) #从剪贴板读取数据 >sd=scale(d)  #对数据进行标 ...

  5. 怪兽z主机豪华版 答问。

    我的淘宝店里,怪兽z主机标准版,分经济版本,标准版,豪华版,三个版本.这里给大家详细介绍一下豪华版的概况. 淘宝购买地址:http://item.taobao.com/item.htm?id=3818 ...

  6. C#使用Windows API 隐藏/显示 任务栏 (FindWindowEx, ShowWindow)

    原文 C#使用Windows API 隐藏/显示 任务栏 (FindWindowEx, ShowWindow) 今天,有网友询问,如何显示和隐藏任务栏? 我这里,发布一下使用Windows API 显 ...

  7. HDU 2451 Simple Addition Expression

    题目大意:有一个关于 简单加法表达式  的定义告诉你,就是  选一个数字i  如果 i+(i+1)+(i+2) 它的和,没有任何一位进位的话,那就是 一个i的简单加法表达式,求小于n的表达式数目. 题 ...

  8. IIS 7关闭应用程序池自动回收设置

    在web应用程序中经常有一些任务就需要在Global文件启用一个线程来实现, 那假设我们在自己的ASP.NET应用程序中加入了Quartz.NET框架,并且配置等等都OK了. 这个站点访问量很少,现在 ...

  9. View从Action中获得数据和html helper function(转载)

    @model MvcApplication1.Models.M_Person @using MvcApplication1.Models; @{ ViewBag.Title = "GetDa ...

  10. 邮件发送 emailsend .net开发

    protected void Button1_Click(object sender, EventArgs e) { MailSender.Send("lizihong3@163.com&q ...