css层叠样式表总结
一.css
css里注释只有一种 /* */
二.css与HTML四种结合方式
1.行内样式
在标签中加入style属性 内部的写法：key1:value;key2:value;
<div style="font-size:4cm">css</div>
2.内嵌样式
<style type="text/css">
div{
font-size:4cm;
}
</style>
作用于当前页面中所有具有相同选择器的标签
3.外部样式引入（主流）
<link rel="stylesheet" type="text/css" href="demo1.css"></link>
href指定的是样式文件的样式；必须一个个引入，多个link。
4. <style>
@import url(demon2.css); //分号一定要加
</style>
后三种引入方式一般都写在<head></head>中
优先级总结：就近原则
三.六种选择器
1.HTML选择器
div{
font-size:4cm;
}
2.id选择器 #定义css选择器
#mydiv{
color:red;
}
3. class选择器 .开始--------->引入时在标签中用class属性
.myclass{
font-weight:bold;
}
4.关联选择器
选择器1 选择器2 p div{
font-family:"黑体";
}
5.组合选择器
选择器1,选择器2{}
6.伪元素选择器
a:link 超链接未点击的状态
a:visited 被访问后的状态
a:hover 光标移到超链接上的状态（未点击）
a:active 点击超链接时的状态
<style>
a{
font-size:20px;
color:blue;
}
a:hover{
font-size:50px;
color:yellow;
}
a:visited{
font-size:10px;
color:green;
}
a:active{
font-size:100px;
color:red;
}
</style>
四.
1.字体样式
font-style:italic; 斜体
font-weight:bold; 粗体
font-size:36px; 字号
font-family:"黑体"; 字体
text-indent:2em; 首行缩进
2.文本样式
text-align:right; 右边输入
3.背景样式
background:red url('photo.jpg') 150px 40px no-repeat;
background-color:red;
background-image:url('photo.jpg');
background-position-x:150px;
background-position-y:40px;
background-repeat:no-repeat;(repeat-x 水平平铺;repeat-y 垂直平铺)
4.定位
div{
width:150px;
height:60px;
border:1px solid red; /*边框 宽度 实线 边框颜色*/
margin:2px; /*div与div之间的间距*/
margin:2px 3px 5px 上2px 左右3px 下5px
margin：2px 3px 上下2px 左右3px
padding:10px; /*边框与文字的距离*/
}
5.布局
float:right; /*漂浮效果 left center right*/
clear:both; /*清除 left right both*/
css层叠样式表总结的更多相关文章
- CSS层叠样式表(Cascading Style sheets)
CSS层叠样式表(Cascading Style sheets) --------- ---------------- ----------- --------------- ----------- ...
- 《精通CSS层叠样式表》
书名 <精通CSS层叠样式表> 图片 时间 2017-7月 学习 感觉和ps一样对我都不友好 3天撸完
- CSS：CSS层叠样式表的概述
CSS层叠样式表:Cascading Style Sheets 介绍: 现代网页的设计原则是内容和样式分离,降低它们之间的直接相互依存关系,解耦性,同时,同样的内容,可以通过不同的CSS样式表现出来. ...
- css:层叠样式表-网页布局基础
css:层叠样式表:一.写法分类: 1.内联(行内,写在标签里面,以属性的形式表现,属性名是style) 例:<table style="background-color: aqua& ...
- 【HTML/XML 7】CSS层叠样式表
导读:上篇博客说到用XSL去实现XML文档的表现形式的美化,那么另外一种方式就是CSS的使用.本篇博客系统的介绍CSS,下篇博客,将系统的介绍XSL. 一.CSS的发展历史 1996年,层叠样式表(C ...
- 实验时css层叠样式表不更新的情况
自定义了CSS的样式,希望在页面中起作用.因为MVC中Views/Shared/_Layout.cshtml是所有视图的公共文件,如下: <!DOCTYPE html> <html& ...
- 前端内容之CSS层叠样式表
CSS(Cascading Style Sheet层叠样式表) 把HTML认为是网页的骨架 那么CSS就是用于对HTML骨架进行修饰,比如加背景色.显示方式.位置等等属性 CSS语法形式: 一个完整的 ...
- CSS层叠样式表的层叠是什么意思（转自知乎）
转自知乎上的回答:http://www.zhihu.com/question/20077745 解答一: 层叠指的是样式的优先级,当产生冲突时以优先级高的为准.1. 开发者样式>读者样式> ...
- css 层叠样式表
css选择器 派生选择器 根据其元素在其上下文关系来定义样式 <style type="text/css">body{ font-size:12px; color:re ...
- css层叠样式表
css的三种声明方式 1.行内样式 通过每个标签都有的style属性 <div style="color:red;">黄卫星说没有内容 ...
随机推荐
- URL 编码 之 我见
URL编码 编辑 url编码是一种浏览器用来打包表单输入的格式.浏览器从表单中获取所有的name和其中的值 ,将它们以name/value参数编码(移去那些不能传送的字符,将数据排行等等)作为URL的 ...
- swoole安装
转自:http://blog.csdn.net/u014207604/article/details/49926207 Windows 下安装 swoole 具体步骤: Swoole,原本不支持在Wi ...
- php浮点数加减乘除bug
项目测试阶段,少部分微信支付成功,但是在异步通知校对订单金额是否一致时,一直被认定订单金额不一致. 类似于: 浏览器输出: 分析: 因为计算机二进制无法准确表示部分浮点数(如2.03.0.58等等), ...
- timestamp to time 时间戳转日期
function timestampToTime(timestamp) { var date = new Date(timestamp * 1000); //timestamp 为10位需*100 ...
- js-TextArea的换行符处理
js-txt文本处理 写自己主页项目时所产生的小问题拿出来给大家分享分享,以此共勉. ---DanlV TextArea的换行符处理 TextArea文本转换为Html:写入数据库时使用 js获取了t ...
- C++程序员必需的修养
原文:http://www.cnblogs.com/ctoroad/archive/2006/03/24/357423.html 我总结了在用C/C++语言(主要是C语言)进行程序写作上的三十二个“修 ...
- BNF巴科斯-诺尔范式
概述 BNF是描述编程语言的文法.自然语言存在不同程度的二义性.这种模糊.不确定的方式无法精确定义一门程序设计语言.必须设计一种准确无误地描述程序设计语言的语法结构,这种严谨.简洁.易读的形式规则描述 ...
- Qt 日志输出文件
在Qt开发过程当中经常使用qDebug等一些输出来调试程序,但是到了正式发布的时候,都会被注释或者删除,采用日志输出来代替. 做过项目的童鞋可能都使用过日志功能,以便有异常错误能够快速跟踪.定 ...
- mysql 免安装版文件含义及作用
相信很多同学在首次安装mysql 免安装版时,对其中的文件不解,下面以 5.6.24为例讲解这里个文件代表什么: bin: 存放编译好的工具 data:存放数据库数据的位置(就是我们数据库存放的地方) ...
- C# 使用 Invoke 实现函数的白盒 UT 测试
公有方法可以直接调用,但是一些非公开的方法,在覆盖率测试的时候也需要覆盖,可以使用 Invoke 来调用. 调用方法如下,其中 this 可以改为被调用的方法所属的类名,通过 BindingFlags ...