2017-3-25 css样式表(一)
样式表:
一、样式表的概念:CSS(Cascading Style Sheets)层叠式样式表,作用是美化HTML网页。
二、样式表的分类:样式表分内联式样式表、内嵌式样式表和外部样式表三种。
1、内联式样式表:A、写在标签里面 。
B、style="样式" 例如:<div style="height:200px;"></div>
C、控制精确,样式优先级最高,但是代码重用性差。
2、内嵌式样式表:A、作为一个独立的区域内嵌在网页里,必须写在head标签里面。<style type="text/css">样式</style>
B、控制没有内联的精确,样式优先级第二,代码重用性好。
3、外部样式表:A、新建一个CSS文件,用来放样式表,如果要在HTML文件中调用样式表,一般用<link href="test.css" rel="stylesheet" />
B、控制没有内联的精确,样式优先级最低,代码重用性最好。
选择器:
选择器是样式表用来选择元素的。
选择器分为四种:标签选择器、Class 选择器、ID选择器、复合选择器。
1、标签选择器:A、用标签名做选择器。
B、优先级最低。
例如:<style type="text/css>
p{
样式:
}
</style>
注:格式对P标签起作用。
2、Class选择器:A、根据Class名来筛选元素,都是以"."开头。
B、优先级排名第二。
例如:<head>
<style type="text/css>
.aaa{
样式:
}
</style>
</head>
<body>
<div class="aaa"></div>
</body>
3、ID选择器:A、根据ID名来筛选出唯一元素,都是以"#"开头。
B、优先级最高。
例如:
<head>
<style type="text/css>
#aaa{
样式:
}
</style>
</head>
<body>
<div id="aaa"></div>
</body>
4、复合选择器:
(1)逗号并列:用","隔开,表示并列。
例如:<style type="text/css>
p,span{
样式:
}
</style>
注:格式对P标签和span标签起作用。
(2)空格后代:用空格隔开,表示后代。
例如:<style type="text/css>
.p .span{
样式:
}
</style>
注:找到使用样式p的标签,在该标签里面span标签使用该样式。
(3)用"."筛选:用"."表示筛选。
例如:<style type="text/css>
p.span{
样式:
}
</style>
注:在p标签中的class="span"的标签,使用此样式。
2017-3-25 css样式表(一)的更多相关文章
- WEB入门三 CSS样式表基础
学习内容 Ø CSS的基本语法 Ø CSS选择器 Ø 常见的CSS样式 Ø 网页中3种使用CSS的方式 能力目标 Ø 理解CSS的 ...
- 深度理解CSS样式表,内有彩蛋....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS样式表
CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...
- JS 控制CSS样式表
JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline. ...
- HTML基础(三)——css样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...
- DOM与CSS样式表
在前文 <DOM与元素节点内联样式>中我们了解了用 DOM 提供的接口操作元素节点内联样式的方法,今天我们来学习一下如何用 DOM 操作 CSS 样式表. CSS 样式表概况 通过使用 H ...
- 一起学HTML基础-CSS样式表-基本概念、分类、选择器
一.基本概念: CSS (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...
- CSS样式表继承详解
最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承 特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始. ...
- 2016年10月27日--css样式表
CSS样式表 样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. !doctype html> <html> <head> <met ...
- CSS样式表 选择器
1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> &l ...
随机推荐
- 服务器部署项目出现问题:Unsupported major.minor version 52.0
问题描述: 编写一个web 前置服务,使用ant编译项目,将项目部署到服务器上,启动时报此错误:Unsupported major.minor version 52.0 网上给出错误原因是服务器安装的 ...
- java实现解析二进制文件(字符串、图片)
1.需求说明,实现细节要求: 解析二进制文件 files\case10\binary,其中包含一个字符串和一张图片,数据文件格式为字符串数据长度(2字节)+字符串内容+图片数据长度(4字节)+图片数据 ...
- ECMAScript 6 笔记(六)
编程风格 1. 块级作用域 (1)let 取代 var (2)全局常量和线程安全 在let和const之间,建议优先使用const,尤其是在全局环境,不应该设置变量,只应设置常量. const优于le ...
- 数据库SQL,NoSQL之小感悟
遇到1000万数据表 最近遇到一个问题,就是单表数据过的存储及查询问题.举个例子:1000万的数据存在一个表中,字段4-5个样子,日常 开发中难免要做过滤.排序.分页.如果把这几个放在一起即要过滤又要 ...
- CSS3知识点整理(一)----基本样式
(一) 在编写CSS3样式时,不同的浏览器可能需要不同的前缀.它表示该CSS属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性,虽然目前较新版本的浏览器都是不需要前缀的,但为了更好的向前兼容前缀 ...
- php 引入文件 include 和require
php 如何引用文件? 先建一个php 文件,php文件名要和所建的类名相同, 然后直接在php 中用include("")/include"" 和requir ...
- Python爬虫爬取qq视频等动态网页全代码
环境:py3.4.4 32位 需要插件:selenium BeautifulSoup xlwt # coding = utf-8 from selenium import webdriverfrom ...
- BZOJ 2463: [中山市选2009]谁能赢呢?(博弈论)
好吧我能说这道题我是猜过去的么= =,看到只有一个数x,x=2时alice赢,就猜奇数bob赢,偶数alice赢,然后就稀里糊涂过了= = 后来找了http://www.haogongju.net/a ...
- 计算机存储负数以及int转byte时-128的出现
我们看下面这段代码 输出的结果的是128,这个没什么疑问 但是当我们不改变数值仅仅加了一个强制转换后 这时我们会发现结果会变成负的128.这时候我们就要怀疑了,为什么会出现这样的结果呢? 对于这个问题 ...
- 指针与数据结构算法_链表(C语言)
一.变量: 声明一个变量系统是没有给这个变量分配内存空间的: 例: int j;//编译的时候是没有分配内存空间的 ;//计算机在编译的时候就会给这个i分配4个字节的内存空间 二.malloc动态分配 ...