第五章 CSS样式基本知识

　　内联式css样式，直接写在现有的HTML标签中
CSS样式可以写在哪些地方呢？从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。
　　内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：
　　　　<p style="color:red">这里文字是红色。</p>
　　嵌入式css样式，写在当前的文件中
嵌入式css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间。如下面代码实现把三个<span>标签中的文字设置为红色：
　　　　<style type="text/css">
span{
color:red;
}
</style>
嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。
　　外部式css样式，写在单独的一个文件中
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内 （不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：
　　　　<link href="base.css" rel="stylesheet" type="text/css" />
　　注意：
　　　　1、css样式文件名称以有意义的英文字母命名，如 main.css。
　　　　2、rel="stylesheet" type="text/css" 是固定写法不可修改。
　　　　3、<link>标签位置一般写在<head>标签之内。

　　三种方法的优先级
有的小伙伴问了，如果有一种情况：对于同一个元素我们同时用了三种方法设置css样式，那么哪种方法真正有效呢？记住他们的优先级：内联式 > 嵌入式 > 外部式
但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样，<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面（实际开发中也是这么写的）。
　　其实总结来说，就是--就近原则（离被设置元素越近优先级别越高）。
　　但注意上面所总结的优先级是有一个前提：内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下。

第六章 CSS选择器

　　什么是选择器？
每一条css样式声明（定义）由两部分组成，形式如下：
　　　　选择器{
样式;
}
在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。
　　　　标签选择器
 标签选择器其实就是html代码中的标签。例如下面代码：p{font-size:12px;line-height:1.6em;}
上面的css样式代码的作用：为p标签设置12px字号，行间距设置1.6em的样式。
　　　　类选择器
 类选择器在css样式编码中是最常用到的。
　　　　　　语法：
　　　　　　　　.类选器名称{css样式代码;}
注意：1、英文圆点开头
　　　　　　　　　　　　　　　　　　　　　　　　2、其中类选器名称可以任意起名（但不要起中文噢）
　　　　　　使用方法：
　　　　　　　　第一步：使用合适的标签把要修饰的内容标记起来，如下：<span>胆小如鼠</span>

　　　　　　　　第二步：使用class="类选择器名称"为标签设置一个类，如下：<span class="stress">胆小如鼠</span>


　　　　　　　　第三步：设置类选器css样式，如下：.stress{color:red;}/*类前面要加入一个英文圆点*/
　　　　ID选择器
在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：
　　　　　　1、为标签设置id="ID名称"，而不是class="类名称"。
　　　　　　2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。

　　　　类和ID选择器的区别：
　　　　　　相同点：可以应用于任何元素
不同点：
　　　　　　1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。


　　　　　　2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。

　　　　子选择器
还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。如：
　　　　　　.food>li{border:1px solid red;}
这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。
　　　　包含(后代)选择器
包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如：
　　　　　　.first span{color:red;}
这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。
　　　　请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
　　　　总结：>作用于元素的第一代后代，空格作用于元素的所有后代。
　　　　通用选择器
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：* {color:red;}
　　　　伪类选择符
更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：a:hover{color:red;}
上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。
　　　　关于伪选择符：
　　　　　　关于伪类选择符，到目前为止，可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏览器）。其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。
　　　　分组选择符
当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：
　　　　　　h1,span{color:red;}
它相当于下面两行代码：
　　　　　　h1{color:red;}
span{color:red;}

一、HTML和CSS基础--HTML+CSS基础课程--第3部分的更多相关文章

  1. Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”

    Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...

  2. Bootstrap<基础一> CSS 概览

    HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 B ...

  3. Html 之div+css布局之css基础

    Css是什么 CSS即层叠样式表(Cascading StyleSheet). 在网页制作时采用层叠样式表技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制. 只要对相应的代码 ...

  4. CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性

    大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...

  5. 前端总结·基础篇·CSS（一）布局

    目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...

  6. 前端总结·基础篇·CSS（二）视觉

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...

  7. 前端总结·基础篇·CSS（三）补充

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 目录 一.移动端 1.1 视口(viewport) 1.2 媒体查询(medi ...

  8. css简单的一些基础知识

    css层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可 ...

  9. #WEB安全基础 : HTML/CSS | 文章索引

    本系列讲解WEB安全所需要的HTML和CSS #WEB安全基础 : HTML/CSS | 0x0 我的第一个网页 #WEB安全基础 : HTML/CSS | 0x1初识CSS #WEB安全基础 : H ...

  10. 阶段02JavaWeb基础day01html&css

    HTML 基础 概念 全写: HyperText Mark-up Language 译名: 超文本标记语言 超级文本标记语言是一种规范,一种标准, 超文本标记语言它通过标记符号来标记要显示的网页中的各 ...

随机推荐

  1. easyUI框架之学习2--添加左侧导航栏

    <head> function addTab(title, url) { if ($('#tableContainer').tabs('exists', title)) { $('#tab ...

  2. easyui datagrid 通过复选框删除新追加的数据问题

    之前写好的功能在保存好数据后再通过复选框删除是没有问题的,可现在想多追加几行,然后选择删除新追加的某几行或一行,通过$('#dg').datagrid('getChecked')方法返回选中行,然而返 ...

  3. JS小记

    好记性不如烂笔头. 1.document.ElementFromPoint:根据坐标获得元素 2.有时候要操作DOM页面,但是得不到预期结果,很可能是因为页面还没加载完成,在console控制台可以看 ...

  4. git工作量统计

    #!/bin/bash function count() { local insert=0 local delete=0 while read line ;do current=`echo $line ...

  5. Database Password Hashes

    SQL Server 2000:- SELECT password from master.dbo.sysxlogins where name=’sa’ 0×010034767D5C0CFA5FDCA ...

  6. PHP undefined index的解决办法

    方法1:服务器配置修改 修改 php.ini 中的 error配置下错误显示方式:将error_reporting = E_ALL | E_STRICT 修改为 error_reporting = E ...

  7. 什么是Gn Gi Gb！

    什么是Gn Gi Gb! 2013-08-24 23:58t百既3 | 浏览 776 次 2013-08-25 00:18 #“团队精英计划—个人高质赛ing!# 提问者采纳   答:这三个接口都是G ...

  8. ctags 的最简单使用

    vim插件ctags的安装和使用 2013-11-19 20:47 17109人阅读 评论(0) 收藏 举报  分类: 开发工具(3)  linux编程(9)  c/c++编程(11)  版权声明:本 ...

  9. <转载>NPOI Excel 单元格背景颜色对照表

    我转载地址:http://www.holdcode.com/web/details/117 NPOI Excel 单元格颜色对照表,在引用了 NPOI.dll 后可通过 ICellStyle 接口的 ...

  10. 马化腾:办公用QQ休闲用微信[Dream Catchers论坛]

    近日,香港大学举办以创新创业为主题的Dream Catchers论坛.其中腾讯董事局主席马化腾在下午两点四十五分在李兆基会议中心做了专题演讲,分享了自己的创业经历并回答了媒体人张力奋有关产品.整整对手 ...