一、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. Unity cg vertex and fragment shaders(二)

    着色器的一般结构: Shader "MyShader/MyShaderName" { Properties { // ... properties here ... } SubSh ...

  2. 浅谈JDBC（二）

    JDBC中的事务 简单来说,事务就是要保证一组DAO方法的操作,要么一起成功要么一起失败. 1.事务控制的位置 在Service中的业务方法内进行事务控制. 2.事务控制的代码 a.注意:JDBC会自 ...

  3. dans le quartier

    culture /kyltyr/ 文化 une école [ekɔl] un cinéma un musée une église un théâtre  [teɑtr] un opéra  [ɔp ...

  4. jQuery常用效果

    1.滑动效果 向上效果:slideUp() 向下效果:slideDown() 向上与向下切换:slideToggle() 2.淡入淡出效果 显示与隐藏切换:fadeToggle() 3.显示隐藏 显示 ...

  5. IOS 表视图(UITableVIew)的使用方法(4)自定义表视图单元

    UITableViewCell的自定义往往需要自建一个UITableViewCell的子类后进行作业.开发者可以选择通过xib或者直接在UITableViewCell的布局中进行UITableView ...

  6. java断言

    public class New{ public static void main(String[] args){ assert false; System.out.println("pas ...

  7. SubLime2 乱码解决

    参考 http://www.fuzhaopeng.com/2012/sublime-text-2-with-gb2312-gbk-support/ 使用其中提到的方法二安装 首先下载http://su ...

  8. LintCode-删除元素

    题目描述: 给定一个数组和一个值,在原地删除与值相同的数字,返回新数组的长度. 元素的顺序可以改变,并且对新的数组不会有影响. 样例 给出一个数组 [0,4,4,0,0,2,4,4],和值 4 返回 ...

  9. LintCode-比较字符串

    题目描述: 比较两个字符串A和B,确定A中是否包含B中所有的字符.字符串A和B中的字符都是 大写字母 注意事项 在 A 中出现的 B 字符串里的字符不需要连续或者有序. 样例 给出 A = " ...

  10. Javascript中的位运算符和技巧

    ECMAScript 整数有两种类型,即有符号整数(允许用正数和负数)和无符号整数(只允许用正数).在 ECMAScript 中,所有整数字面量默认都是有符号整数,这意味着什么呢? 有符号整数使用 3 ...