第五章 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. android选择时间攻略

    安卓开发过程中难免会碰到需要选择日期时间的情况,由于大部分android初级教程都没教怎么选择时间,初学者碰到这种难免会有些不知所措,难道要让用户自己输入日期时间?先不说用户体验不好,处理用户输入各式 ...

  2. Spring学习3—控制反转（IOC）Spring依赖注入（DI）和控制反转（IOC）

    一.思想理解 Spring 能有效地组织J2EE应用各层的对象.不管是控制层的Action对象,还是业务层的Service对象,还是持久层的DAO对象,都可在Spring的 管理下有机地协调.运行.S ...

  3. electron加载jquery报错问题

    <!-- Insert this line above script imports --> <script>if (typeof module === 'object') { ...

  4. 锋利的jQuery-4--$(document).ready()和window.onload方法的区别

    jQuery中的$(document).ready()和JavaScript中的window.onload方法主要有两个方面的不同: 1.执行时机: onload : 网页中所有的元素和元素的关联文件 ...

  5. 转:Java NIO系列教程(九) Pipe

    Java NIO 管道是2个线程之间的单向数据连接.Pipe有一个source通道和一个sink通道.数据会被写到sink通道,从source通道读取. 这里是Pipe原理的图示: 创建管道 通过Pi ...

  6. 转:Java NIO系列教程(八) DatagramChannel

    Java NIO中的DatagramChannel是一个能收发UDP包的通道.因为UDP是无连接的网络协议,所以不能像其它通道那样读取和写入.它发送和接收的是数据包. 打开 DatagramChann ...

  7. Nginx下安装PIP监控软件

    wget http://pypi.python.org/packages/source/s/setuptools/setuptools-0.6c11.tar.gztar zxvf setuptools ...

  8. [OpenJudge 3061]Flip The Card

    [OpenJudge 3061]Flip The Card 试题描述 There are N× Ncards, which form an N× Nmatrix. The cards can be p ...

  9. [BZOJ1477]青蛙的约会

    [BZOJ1477]青蛙的约会 试题描述 两只青蛙在网上相识了,它们聊得很开心,于是觉得很有必要见一面.它们很高兴地发现它们住在同一条纬度线上,于是它们约定各自朝西跳,直到碰面为止.可是它们出发之前忘 ...

  10. SIFT+HOG+鲁棒统计+RANSAC

    今天的计算机视觉课老师讲了不少内容,不过都是大概讲了下,我先记录下,细讲等以后再补充. SIFT特征: 尺度不变性:用不同参数的高斯函数作用于图像(相当于对图像进行模糊,得到不同尺度的图像),用得到的 ...