CSS用法简介
CSS(Cascading Style Sheets层叠样式表)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
1.基本使用语法
样式类别-方向-特征 : 值;
设置颜色:
color : red;
设置字体大小
font-size : 10px;
字体描述
text-decoration : overline;
2. CSS分类(如何使用CSS)
行内样式
直接给元素添加 style="" 属性
内嵌样式
直接给元素添加一个ID或一个class属性,在head标签中(不一定)写上
<style type="text/css">
</style>
在里面写上样式的语法,并与对应的元素挂钩
外部样式
在htm文件外有一个css文件,样式写在css文件中,在html页中将这个样式文件加载进来
<link href="css路径" rel="stylesheet" type="text/css" />
3.选择器(selecter)
id选择器
#id {
/* 样式 */
}
类选择器
.className {
/* 样式 */
}
标签选择器
tagName {
/* 样式 */
}
三个样式同时使用,如果没有样式冲突,都应用
如果有冲突,同级的就近原则
如果不是同级的,ID>类>标签(专一的优先级最大)
类选择器可以使用 class="c1 c2 c3 c4" 的语法将多个类选择器作用与元素上
不规范用法:
在CSS使用中,id选择器与类选择器可以同样的作用与多个元素
id在规范中就是表示唯一,浏览器允许这么使用,但是在js执行中会出现问题
复合选择器
标签类选择器
标签.类名 { /* 样式 */ }
后面兄弟选择器
选择器+* {
/* 选中前面元素选择器的后一个元素 */
}
(+号不能省略)
后代选择器
将包含在某个元素中的元素都称为其后代
<div id="dv1">
<p>123</p>
<div id="dv2">
<span id="span1"></span>
</div>
<p>456</p>
</div>
祖代选择器 后代选择器 {
/* 样式 */
}
子代选择器
父带选择器>子代选择器 {
/* 样式 */
}
组合选择器
选择器1, 选择器2, 选择器3, ..., 选择器N {
/* 这些选择器的元素都具有这个样式 */
}
4.常用样式
文本
color
font-size
font-family
font-weight
边框
border-color
border-style
border-width
背景
background-color
布局
其他
CSS用法简介的更多相关文章
- css012 css布局简介
css012 css布局简介 一. 网页布局的类型 网页布局的类型 1.固定宽度 2.流式 3.相应式web设计 二. 如何进行css布局 1.强大的<div>标签 网页的h ...
- IOS NSInvocation用法简介
IOS NSInvocation用法简介 2012-10-25 19:59 来源:博客园 作者:csj007523 字号:T|T [摘要]在 iOS中可以直接调用某个对象的消息方式有两种,其中一种就是 ...
- JodaTime用法简介
JodaTime用法简介 Java的Date和Calendar用起来简直就是灾难,跟C#的DateTime差距太明显了,幸好有JodaTime 本文简单罗列JodaTime的用法 package co ...
- Apache自带压力测试工具ab用法简介
ab命令原理 ab命令会创建很多的并发访问线程,模拟多个访问者同时对某一URL进行访问.它的测试目标是基于URL的,因此,既可以用来测试Apache的负载压力,也可以测试nginx.lighthttp ...
- CSS 选择器简介
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 选择器权重 如果以4位数表示选择符权重,那么: 元素选择器的权重是1: id 选择器的权重为100: cl ...
- Postman用法简介
转自:http://blog.csdn.net/flowerspring/article/details/52774399 Postman用法简介 转载 2016年10月10日 09:04:10 10 ...
- MSSQL Sql加密函数 hashbytes 用法简介
转自:http://www.maomao365.com/?p=4732 一.mssql sql hashbytes 函数简介 hashbytes函数功能为:返回一个字符,通过 MD2.MD4.MD5. ...
- java assert的用法简介【转】
assert的基本用法 assertion(断言)在软件开发中是一种常用的调试方式,很多开发语言中都支持这种机制,如C,C++和Eiffel等,但是支持的形式不尽相同,有的是通过语言本身.有的是通过库 ...
- glVertexAttribPointer 用法简介
在内存中采用交叉模式存储,向gpu传入顶点数据的方法 GPU: #version 100 attribute highp vec2 aPosition; attribute highp vec2 a ...
随机推荐
- Delphi实现全局鼠标钩子
其中涉及到的一些API,网上均能查到详细的解释,这里不再熬述.源码下载 因为是全局钩子,所以要用dll注入.用到的鼠标消息结构如下: PMouseHookStruct = ^TMouseHookStr ...
- poj2864
#include<iostream> #include<cstdio> #include<cmath> using namespace std; int main ...
- Xshell中文乱码
终端”编码设置,默认是 默认语言,选择UTF8设置即可
- 迷宫寻宝(一)(bfs)
迷宫寻宝(一) 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 一个叫ACM的寻宝者找到了一个藏宝图,它根据藏宝图找到了一个迷宫,这是一个很特别的迷宫,迷宫里有N个编 ...
- Productivity Improvements for the Entity Framework(实体框架设计)【转】
Background We’ve been hearing a lot of good feedback on the recently released update to the Entity F ...
- Effective C++ 条款18
让接口easy被正确使用,不easy被误用 如题目,我们自己的程序接口是面向用户的,程序的目的不可是解决这个问题,并且要让用户easy使用.所以.必须保证我们的程序接口具有非常强的鲁棒性. 怎么保证接 ...
- DevExpress控件之:ChartControl 动态绑定数据
private void BindData(ViewType vt) { chartControl1.Series.Clear(); //Series series1 = new Series(&qu ...
- 随滚动条滚动的居中div
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- css3设置box-pack和box-align让div里面的元素垂直居中
只要设置元素的box-pack和box-align即可,这两个属性当前只有webkit和moz支持,要设置垂直居中的话只需要将这两个属性的值都设置为center即可,需要的朋友可以参考下 以前处理 ...
- vue+webpack一些知识
使用mac的用户需要获取权限才可以使用npm install指令 设置node目录的权限指令 sudo chmod -R 777 /usr/local/lib/node_modules/ 大家都知道国 ...