css-概述和选择器
一：CSS 概述
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
二：存在方式
存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。
语法：style = 'key1:value1;key2:value2;'
- 在标签中使用 style='xx:xxx;'
- 在页面中嵌入 < style type="text/css"> </style > 块
- 引入外部css文件
三：选择器
1）标签选择器
div{ }
<div > </div>
2）class选择器
.bd{ }
<div class='bd'> </div>
3）id选择器
#idselect{ }
<div id='idselect' > </div>
4）关联选择器
#idselect p{ }
<div id='idselect' > <p> </p> </div>
5） 组合选择器
input,div,p{ }
6）属性选择器
input[type='text']{ width:100px; height:200px; }
PS:
优先级，标签上style优先，编写顺序，就近原则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1,#i2,#i3{
background-color: red;
height: 48px;
}
/*.c1{*/
/*background-color: red;*/
/*height: 48px;*/
/*}*/ div{
background-color: blue;
height: 48px;
}
span div{
background-color: yellow;
height: 48px;
}
.c1 div{
background-color: yellow;
height: 48px;
}
input[n="alex"]{
background-color: yellow;
height: 48px;
}
</style>
</head>
<body>
<div style="background-color: #2459a2;height:48px">1</div>
<span>
<div id="i1">2</div>
</span>
<div class="c1">3</div>
<div id="i1">3</div> <input type="text" n="alex">
<input type="password">
</body>
</html>
css-概述和选择器的更多相关文章
- 一、CSS概述 二、CSS的选择器（认识） 三、CSS样式和属性（练习） 四、重构商城首页DIV+CSS(页面布局)（重点） 浮动/更改显示方式
一.CSS概述###<1>概念 DIV,就是一个HTML元素,块级元素,通常结合CSS进行页面的布局. CSS,层叠样式表,给HTML元素增强显示. ###<2>作用 样式定义 ...
- Unit02： CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明
Unit02: CSS 概述 . CSS 语法 . CSS 选择器 . CSS声明 my.css p { color: yellow; } demo1.html <!DOCTYPE html&g ...
- xhtml和css概述
Xhtml和css概述 1.html的过渡到xhtml html与xhtml不是两种语言,它们是一种语言的不同阶段,有点类似于文言文和白话文之间的关系.因为网络技术的日新月异,html的不断改进,所以 ...
- CSS的总结(选择器,伪类等...)
关于组合选择器可参考:http://www.cnblogs.com/starof/p/4453458.html 主要内容 CSS概述 CSS和HTML结合的四种方式 CSS样式优先级和代码规范 CSS ...
- 前端之css样式（选择器）。。。
一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...
- 前端基础--css基本语法,选择器
一.css概述 CSS(Cascading Style Sheet)层叠样式表,定义如何显示HTML元素,给HTML设置样式,让它更加美观.当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式 ...
- 前端基础之css样式（选择器）
一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...
- 前端之css样式（选择器）
一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...
- Web前端：1、HTML&CSS概述及结构
万维网联盟(World Wide Web Consortium)简称W3C,专门为了定义网页相关的标准而成立,如网页中的HTML.CSS.DOM.HTTP.XML等标准. 根据W3C标准,一个网页主要 ...
- CSS伪类选择器
一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...
随机推荐
- loj2542 「PKUWC2018」随机游走 【树形dp + 状压dp + 数学】
题目链接 loj2542 题解 设\(f[i][S]\)表示从\(i\)节点出发,走完\(S\)集合中的点的期望步数 记\(de[i]\)为\(i\)的度数,\(E\)为边集,我们很容易写出状态转移方 ...
- 洛谷 P4091 [HEOI2016/TJOI2016]求和 解题报告
P4091 [HEOI2016/TJOI2016]求和 题目描述 在2016年,佳媛姐姐刚刚学习了第二类斯特林数,非常开心. 现在他想计算这样一个函数的值: \[ f(n)=\sum_{i=0}^n\ ...
- Spring小节
Spring的总结 Spring的核心: 1. Spring的两大核心: 1. IOC: 控制反转,将创建(实例化)对象的权利交给Spring容器去进行管理. 2. AOP: 面向切面编程(将切面织入 ...
- configServer的高可用
1.利用RabbitMQ或者是Kafka来搭建集群. 2.利用nginx来进行 3.利用Eureka来搭建
- MySQL 快速入门
MySQL的相关概念介绍 MySQL 为关系型数据库(Relational Database Management System), 这种所谓的"关系型"可以理解为"表格 ...
- 星号三角形 I
N = int(eval(input())) for row in range(1,N+1): if row%2 != 0: a = '*'*row print ('{}'.format(a.cent ...
- Ansible1: 简介与基本安装
目录 Ansible特性 Ansible的基本组件 Ansible工作机制 Ansible的安装 Ansible是一个综合的强大的管理工具,他可以对多台主机安装操作系统,并为这些主机安装不同的应用程序 ...
- jquery.lazyload插件实现图片延迟加载详解
什么是LazyLoad技术? 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互.尤其是对于高清晰的图片,占了几百K的空间.Lazy Load 是一个用 JavaScript 编写的 ...
- day8 java基础细节回顾
java之父——James Gosling java吉祥物——duke 编译: 源文件(.java文件)-->java编译器==>.class文件 运行:类装载器-->字节码校验器- ...
- printf与fprintf函数的区别
printf是标准输出流的输出函数,用来向屏幕这样的标准输出设备输出,而fprintf则是向文件输出,将输出的内容输出到硬盘上的文件或是相当于文件的设备上 printf是有缓冲的输出,fprintf没 ...