一、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. 我用过的linux命令--安装Hadoop

    1. hadoop软件传送给虚拟机 还是利用WinSCP把hadoop软件安装包,放到linux的Downloads文件夹中. 2. 选择安装目录 把hadoop安装包copy到这个安装目录中,这里我 ...

  2. eclipse maven SLF4J: Failed to load class org.slf4j.impl.StaticLoggerBinder

    现象:运行eclipse maven build,console 有红色日志如下: SLF4J: Failed to load class "org.slf4j.impl.StaticLog ...

  3. JS 利用window.open实现post方式的参数传递

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. PHP的环境搭建

    下载开发环境 wampserver 下载sublime text 2 sublime使用技巧 1:安装漂亮的编程字体http://pan.baidu.com/s/1xMex9 下载"程序编写 ...

  5. load_library(linker.cpp:759): library "libmaliinstr.so" not found

    1.02-07 15:19:09.277: E/linker(16043): load_library(linker.cpp:759): library "libmaliinstr.so&q ...

  6. bzoj 1196: [HNOI2006]公路修建问题 二分+并查集

    题目链接 1196: [HNOI2006]公路修建问题 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1576  Solved: 909[Submit ...

  7. codeforces 609F. Frogs and mosquitoes 二分+线段树

    题目链接 F. Frogs and mosquitoes time limit per test 2 seconds memory limit per test 512 megabytes input ...

  8. chroot命令

    CHROOT就是Change Root,也就是改变程序执行时所参考的根目录位置.通过chroot机制来更改某个进程所能看到的根目录,即将某进程限制在指定目录中,保证该进程只能对该目录及其子目录的文件有 ...

  9. mybatis+spring+c3p0+maven+ehcache

    项目截图 pom.xml如下 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http: ...

  10. 解决64位系统下IIS 8下Asp+Access网站配置

    一.IIS7的安装 Windows 中IIS8是默认不安装的,所以在安装完windows 8,之后如果需要安装IIS8的话,就要自己动手了. 安装的步骤为:开始>控制面板>程序>打开 ...