CSS样式表基础知识、样式表的分类及选择器
一、CSS基本概念:
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页。
/*注释区域*/ 此为注释语法
二、样式表的分类
1、内联样式表(和html联合显示,控制精确,但是可重用性差,冗余多)
例:<p style="font-size:14px;">内联样式表</p>
以上就是一个简单的内联样式表,用在<body>中的标签中,相当于style附在标签中,只改变该标签p中的样式和格式。
2、内嵌样式表
例:<style type="text/css">
p //格式对p标签起作用
{ 样式;
}
</style>
这是一个内嵌样式表,就是把<style>样式单独抽出来,放在<head>中,独立控制p标签的样式和格式。
3、外部样式表(显而易见,就是独立于html的文件,但是仍然需要html调用该外部样式表才能发挥其作用)
需要新建一个CSS文件,用来单独存放样式表。当在html中调用此样式表时,需要在html文件右击---CSS样式--附加样式表。当连接成功后,在html文件<head>中会出现<link..>的类似连接路径的标签。
4、有些标签有默认的边距,一般写样式表代码的时候都会先去除(也可以设置其他样式),去除边距如下:
<style type="text/css"> * //格式对所有标签起作用 {
margin=0px auto;//auto表示居中,
padding=0px; } </style>
三种方法的优先级:
内联式 > 嵌入式 > 外部式
就近原则,嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面
以上规则适用于相同权值的情况
三、选择器
1.标签选择器。用标签名做选择器。
2.class选择器。都是以“.”开头。
3.ID选择器。以“#”开头。
<div id="样式名">
ID选择器只能在文档中使用一次,类选择器则可以使用多次
一个元素可以使用多个类选择器同时设置多个样式,而ID选择器是不可以的,如 <span class="stress bigsize">三年级</span>
4.复合选择器
(1)用“,”隔开,表示并列。
(2)用空格隔开,表示后代。
(3)筛选“.”。
CSS 分组选择符
多个标签使用逗号隔开:
h1,span{color:red;}
相当于:
h1{color:red;}
span{color:red;}
注:选择器作用到那个标签都那个标签起作用,有的要直接做用到某个标签上,才能起到作用
CSS样式表基础知识、样式表的分类及选择器的更多相关文章
- css+js+html基础知识总结
css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...
- QT 样式表基础知识
1. 何为Qt样式表2. 样式表语法基础3. 方箱模型4. 前景与背景5. 创建可缩放样式6. 控制大小7. 处理伪状态8. 使用子部件定义微观样式 8.1. 相对定位 8.2. 绝对定位 摘要 ...
- SQL server基础知识(表操作、数据约束、多表链接查询)
SQL server基础知识 一.基础知识 (1).存储结构:数据库->表->数据 (2).管理数据库 增加:create database 数据库名称 删除:drop database ...
- oracle 基础知识(十一)----表空间结构
一,逻辑结构图 二.tablespace 01,Oracle表空间 它是一个逻辑的概念,它在物理上是不存在的. 02,oracle 存储结构 03.表空间特性 一个数据库可以包含多个表空间,一个表空间 ...
- oracle 基础知识(二)-表空间
一,表空间 01,表空间? Oracle数据库是通过表空间来存储物理表的,一个数据库实例可以有N个表空间,一个表空间下可以有N张表.有了数据库,就可以创建表空间.表空间(tablespace)是数据库 ...
- 关于CSS你应该知道的基础知识 - 样式应用篇
上一篇简单总结了一下选择器,如果一个元素被多个选择器选中,元素的样式就会以级联方式被应用到.要搞清最终那个样式被应用到元素上了,首先要明白引用CSS代码的几种方式. CSS代码引用方式 如何应用CSS ...
- Selenium基础知识(四)表单切换
在测试过程中,经常会碰到frame和iframe,嵌套等情况 这种情况下直接通过id,name等等是无法定位到的 好在selenium替我们想到了这个问题switch_to方法解决问题 switch_ ...
- python 基础知识3-列表元祖
1.列表增. # append 追加,给列表的最后面追加一个元素 li = ['alex','wufa','太白','大白'] li.append('教师') li.append(1) print(l ...
- CSS的一些基础知识
<!DOCTYPE html><html><head><meta charset="utf-8"><title>标题&l ...
随机推荐
- 排序算法——交换排序(冒泡排序、快速排序)(java)
一.冒泡排序 时间复杂度:O(n^2) 公认最慢的排序,每次把最大/最小的放一边,原理: [57,68,59,52] [57,68,59,52] [57,59,68,52] [57,59,52,68] ...
- semver语义化版本号
semver语义化版本号 语义化版本号各位置的含义 版本号:X.Y.Z X: 代表发生了不兼容的API改变 Y: 代表向后兼容的功能性变化 Z: 代表向后兼容bug fixes 语义化版本号示例 1. ...
- adb server is out of date. killing... ADB server didn't ACK * failed to star
The connection to adb is down, and a severe error has occured. [-- :: - HelloOPone] You must restart ...
- SPOJ 687 Repeats(后缀数组+ST表)
[题目链接] http://www.spoj.com/problems/REPEATS/en/ [题目大意] 求重复次数最多的连续重复子串的长度. [题解] 考虑错位匹配,设重复部分长度为l,记s[i ...
- java基于P2P的聊天和文件传输实例
用java的NIO技术编写的 1. 支持聊天功能 2. 拖拽文件能够实现文件传输功能.也能够是目录 3. 启动时能够选择server端或client端启动 4. 本人原创.学习NIO和java的网络通 ...
- Hibernate中,left join、inner join以及left join fetch区别(转)
标签: hibernate hql inner join left right 杂谈 分类: SQL 原文地址:http://m33707.iteye.com/blog/829725 Select F ...
- Javaweb统计在线人数的小栗子
最近在学习Javaweb相关的内容(不黑不吹之前对web开发零基础),下面通过一个统计在线人数的小栗子讲讲Servlet监听器吧 开发环境 eclipse tomcat 7 先说说这个小栗子的构思: ...
- Android 使用 intent 实现简单登陆页面
前言 第一个 Android 程序,应该有些纪念的意义吧~ 主页面布局 给 Button 添加响应函数:android:onClick="login" public void lo ...
- Eclipse+ADT的环境搭建
Index: . Java环境变量的设置 . Android环境变量的设置 1.Java环境变量的设置 A.属性名称:JAVA_HOME 属性值:C:\Program Files\Java\jdk1. ...
- 挺有意思的Blog
http://blog.csdn.net/dawanganban/article/details/19925449 http://www.syslog.org/ https://baoz.net/li ...