一、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. XML读写文件辅助类

    /// <summary> /// 历史下载记录xml文件操作 /// </summary> public class XMLHelper { private string x ...

  2. javascript 未结束的字符串常量

    1.JAVASCRIPT引用时,使用的字符语言不一致. 比如:<script type=”text/javascript” src=”xxx.js” charset=”UTF-8″>.xx ...

  3. Android 开发笔记“Eclipse 调试和快捷键”

    原文地址:http://blog.sina.com.cn/s/blog_5cf876340100aswr.html Eclipse 调试器和 Debug 视图 Eclipse SDK 是针对 Java ...

  4. maven安装scala插件

    默认情况maven不支持scala 所以需要安装maven-scala插件 更新地址:http://alchim31.free.fr/m2e-scala/update-site/ (m2eclipse ...

  5. [LeetCode]题解（python）：123-Best Time to Buy and Sell Stock III

    题目来源: https://leetcode.com/problems/best-time-to-buy-and-sell-stock-iii/ 题意分析: 和上题类似,array[i]代表第i天物品 ...

  6. 关于block 用法

    Block  Apple 在C, Objective-C, C++加上Block這個延申用法.目前只有Mac 10.6 和iOS 4有支援.Block是由一堆可執行的程式組成,也可以稱做沒有名字的Fu ...

  7. 在IT公司，project manager 基本上和秘书，助理什么的差不多

    我感觉非常有道理,所以我不做Leader,哈哈哈

  8. 宣布在 Azure 镜像库中正式推出 Windows Server 2012 R2 并降低 Windows Azure 的实例定价

    我们今天将宣布两条消息,为使用基础结构服务的客户提供更多选择和成本节约:在镜像库中推出 Windows Server 2012 R2 以及降低 Memory Intensive 计算实例定价. 虚拟机 ...

  9. python3 ImageTk 安装方法

    使用命令: $ sudo yum search PIL | grep python3 可显示得知: python3-dogpile-cache.noarch : A caching front-end ...

  10. opencv中遇到的的一些错误

    一:错误提示:OpenCV Error:Bad argument<src and dst have different formats> in unkown function,file.. ...