一、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. BZOJ 1624: [Usaco2008 Open] Clear And Present Danger 寻宝之路( 最短路 )

    直接floyd.. ----------------------------------------------------------------------- #include<cstdio ...

  2. osgText::Text简介

    整理自<OpenSceneGraph三维渲染引擎编程指南> 在OSG中,为了显示高质量的文字,专门定义了一个新的名字空间来管理场景中的文字渲染,这个名字空间中的类主要用于加载字体和控制文字 ...

  3. Delphi函数指针的两种定义（对象方法存在一个隐藏参数self，所以不能相互赋值）

    delphi中经常见到以下两种定义 Type TMouseProc = procedure (X,Y:integer); TMouseEvent = procedure (X,Y:integer) o ...

  4. ORACLE模拟一个数据文件坏块并使用RMAN备份来恢复

    1.创建一个实验用的表空间并在此表空间上创建表 create tablespace blocktest datafile '/u01/oradata/bys1/blocktest.dbf' size ...

  5. android 大小写转换

    private void toUpperCase(byte[] data, int start, int len) { int end = start + len; int dist = 'A' - ...

  6. pomelo

    简介 Pomelo 是基于 Node.js 的高性能.分布式游戏服务器框架.它包括基础的开发框架和相关的扩展组件(库和工具包),可以帮助你省去游戏开发枯燥中的重复劳动和底层逻辑的开发.Pomelo 不 ...

  7. 用elasticsearch索引mongodb数据

    参照网页:单机搭建elasticsearch和mongodb的river 三个步骤: 一,搭建单机replicSet二,安装mongodb-river插件三,创建meta,验证使用 第一步,搭建单机m ...

  8. 统计难题（trie树）

    统计难题 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131070/65535 K (Java/Others)Total Submi ...

  9. vs2010经常使用快捷键

    调试快捷键 F6: 生成解决方式 Ctrl+F6: 生成当前项目 F7: 查看代码 Shift+F7: 查看窗口设计器 F5: 启动调试 Ctrl+F5: 開始运行(不调试) Shift+F5: 停止 ...

  10. Android实现视频录制

    安卓实现视频录制,有两种方法,一种是调用自带的视频功能,一种是使用MediaRecorder. 每种方法都有自己的优缺点.接下来,把两种方法的代码写出来. 先说第一种方法,也是最简单的方法,那就是直接 ...