CSS:描述样式
一、CSS
css:Cascading Style Sheet,层叠样式表,用于描述网页样式
1. 同一个标签可以有多个选择器作用,给他增加样式;
2. 有继承性,祖先的标签的一些属性,可以继承给后代标签;
3. 有层叠性,当遇见冲突的时候有着一套严密法律,规定谁生效谁被杠掉。
css的维护者是w3c,最新版是css3,但是浏览器没有那么好的兼容
css分成两部分:
1. 选择谁?
2. 设置什么样式?
二、选择器
1. 标签选择器
2. id选择器 "#"
3. class选择器 "."
给某一类元素,设置相同的类名,然后通过这个类名来选择它们。
原子类:将一些简单的属性做成一个类,然后元素自行选择
4. 后代选择器 .div1 .div3 p{}
5. 交集选择器 p.ha{}
6. 并集选择器 p,div{}
7. 通配符 *{}
继承性
css规定,有一些属性,给某一个元素设置了,它的后代元素同样拥有这个属性了。
有了继承性,就能够把一些初始的,基本的,普遍的设置,写在body里
哪些元素具有继承性呢?
color
text-系列,例如 text-decoration:underline;
font-系列,例如 font-size:30px;
line-系列
特别的,要知道不能继承的属性:background-color、所有盒模型的属性(width、height、border、padding、margin)都是不继承的!
层叠性
处理冲突的能力,就是当多个选择器都选择上了同一个标签,听谁的?
权重:id > class > 标签
1. 选择上了
先比权重--再比远近(style出现的顺序)
2. 没有选择上
先比远近(祖辈标签的距离)--再比权重
应用场景:先设置共性、再针对设置私有(层叠掉共性)
!important提升权重:严禁滥用!important提升权重,只能在原子类的情况时有!
三、设置样式
颜色表示法
1. 单词
black、white、red、green、blue、yellow、pink、orange、purple、gold、gray、yellowgreen、greenyellow等等
2. rgb()
红色
background-color: rgb(255,0,0);
绿色
background-color: rgb(0,255,0);
蓝色
background-color: rgb(0,0,255);
黑色
background-color: rgb(0,0,0);
白色
background-color: rgb(255,255,255);
灰色
background-color: rgb(111,111,111);
3. 十六进制
1. 文字样式
color
font-size:尺寸
line-height:行高
font-family:字体
网页中,为了让所有用户都有一致的体验,只能使用宋体、微软雅黑
font-family:"Arial","Microsoft Yahei","SimSun";
font-weight:字体权重
font-weight:bold; ---> font-weight:700; 加粗
font-weight:normal; ---> font-weight:400; 不加粗
font-style:样式
font-style:italic; 倾斜
font-style:normal; 不倾斜
text-decoration:字体装饰
text-decoration:underline; 下划线
text-decoration:none; 默认,没有下划线
text-decoration:line-through; 删除线
font综合
font:italic bold 12px/20px "arial","Microsoft Yahei","SimSun";
2. 盒子模型
盒模型就是width、height、padding、border、margin这几个属性
真实占有宽度 = width + 左边padding + 右边padding + 左边border + 右边border
padding:上、右、下、左
padding-top、padding-right、padding-bottom、padding-left;
padding:10px 20px 30px;
/*等价于*/
padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:20px;/*和右边一样*/
border:粗细 线型 颜色
border:1px solid red; 工作中只许用solid(实线)和dashed(虚线),其他线型都有兼容问题
border-width、border-style、border-color;
border-top-width、border-top-style、border-top-color;
border-bottom:none; 如果某一个边框我们不想要,那么就写none
margin:外边框
margin-top、margin-right、margin-bottom、margin-left;
注意:相邻的两个margin有塌陷现象,以margin大的为准。
居中策略
text-align:center; 盒子中的文字水平居中
margin:0 auto; 盒子本身水平居中
line-height:盒子高度; 但行文本的垂直居中
3. 浮动
标准文档流
从左至右、从上到下、有一个"光标"的概念
性质:空白折叠现象;高矮不齐,底边对齐;把元素分为"块级元素"和"行内级元素"
块级元素:div、h、p、ul、li、dl、dt、dd
能够设置宽度、高度(没有设置宽度,默认是父亲的宽度)
不能并排
行内级元素:span、a、b、u、i、em、strong
不能设置宽度、高度
可以并排
块级和行内相互转换
display:block; 把行内-->块 非常有用
display:inline; 把块-->行内 丝毫无用,工作10年都遇不到
我们发现标准文档流是做不出网页的,因为它太迂腐:能够设置宽度的不能并排,能够并排的不能设置宽高
所以需要脱离标准流:脱离标准流一共有三种方法:浮动、绝对定位、相对定位
浮动:float
浮动是做并排用的
浮动元素脱离了文档流,所以没有inline、block之分了
浮动的儿子不能撑高父亲
浮动在竖直方向上的margin塌陷现象消失
浮动字围效果
清除浮动
有高度的盒子能够管住自己内部的浮动元素
如果盒子没有高度,内部浮动的元素序列就乱套了,第二个序列就会追随第一个序列了。
解决办法1:给后面的盒子加上clear:both
缺点:box还是没有高度、margin失效
解决方法2:隔外墙
虽然margin失效,但可以用小技巧来弥补,可以用墙的高度来做间隔
但是盒子依然没有高度
解决办法3:内墙
现在有了margin、也有了高度了,但是放置的标签太多。这些标签没有语义,看起来不爽。
解决办法4:overflow:hidden;
工作中常用的
在浮动的父盒子上加 overflow:hidden;
在两个大部分之间隔外墙
<div class="box1"> → 这个盒子没高,就写上overflow:hidden;
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<div class="box2"> → 这个盒子没高,就写上overflow:hidden;
<p>1</p>
<p>2</p>
<p>3</p>
</div>
4. 定位
position:relative; 相对定位
position:absolute; 绝对定位
position:fixed; 固定定位
子绝父相
z-index 只有定位的元素才能写z-index值;从父现象(父亲怂了,儿子再牛逼也没有用)
5. 背景
属性
background:red url(1.jpg) no-repeat -10px -100px fixed;
background-color:red;
background-image:url(images/1.jpg);
background-repeat:no-repeat/repeat-x/repeat-y;
background-attachment:fixed; 固定
background-position:100px 200px;
最常见的应用:CSS精灵
就是把多个小杂碎图片,合成一张图片,然后通过backgroud-position定位只显示其中一部分。
这样能够显著降低HTTP请求数
应用:
通栏banner/大背景
background-position:center top; ---->background-position:50% 0;
背景图的应用
先导符号放到padding里
<h1>爱前端-专业的前端开发培训</h1>
.header h1{
width: 221px;
height: 68px;
background:url(images/logo.png);
/*h1中的文字方便搜索引擎抓取,背景图用于展示*/
line-height: 400px;
overflow: hidden;
}
6. 表格、列表
ul{
list-style:none;
}
7. 超链接美化
伪类:link、visited、hover、active
爱恨准则:love hate
常见写法:
a:link,a:visited{}
a:hover{}
/*楔形小三角*/
div{
width: 0px;
height: 0px;
border: 10px solid white;
border-top-color:blue;
border-bottom: none;
transition:all 0.4s ease 0s;
}
div:hover{
transform:rotate(180deg);
}
CSS:描述样式的更多相关文章
- 【css学习整理】css基础(样式,语法,选择器)
CSS是什么? cascading 层叠样式表 sheet 样式文件 style 外观个性化 CSS语法? 声明方法: 选择器(属性: 值; 属性: 值) 选择器: 通过名称制定对哪些标签进行样式设置 ...
- 0010 CSS字体样式属性:font-size、font-family、Unicode字体、font-weight、font-style、综合设置、color、 text-align、line-height、text-indent、text-decoration、、、
CSS字体样式属性.调试工具 目标 应用 使用css字体样式完成对字体的设置 使用css外观属性给页面元素添加样式 使用常用的emment语法 能够使用开发人员工具代码调试 1.font字体 1.1 ...
- CSS数据样式
CSS数据样式 表格 定制表格 我们除了可以使用<table>标签进行绘制表格,在css3中display也支持进行表格的样式绘制. 样式规则 说明 table 对应 table tabl ...
- 2020年12月-第02阶段-前端基础-CSS字体样式
CSS字体样式属性调试工具 应用 使用css字体样式完成对字体的设置 使用css外观属性给页面元素添加样式 1.font字体 1.1 font-size:大小 作用: font-size属性用于设置字 ...
- 精简的网站reset 和 css通用样式库
参考链接:http://www.zhangxinxu.com/wordpress/2010/07/我是如何对网站css进行架构的/ reset.css body{ line-height:1.4; c ...
- css初始化样式代码
为什么要初始化CSS? CSS初始化是指重设浏览器的样式.不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每次新开发 ...
- 漂亮的CSS按钮样式集以及在线生成工具
以前我们制作一样带带阴影.圆角或3D感的按钮都需要用图片来制作,但CSS3出来后就可以不用图片了,由于是代码写的按钮样式,在Retina上浏览依然清晰美观.虽然不错,但我们写一个阴影+质感的按钮还是挺 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- html / css打印样式
最近做公司后台系统,需要打印贴箱标签,按照正常打印A4纸的标准,测试的效果不是自己想要的,文字排版布局都乱了,查了一些资料,需要设置的东西我总结了一下: 显示器(screen)和打印机(printer ...
- CSS常用样式及示例
CSS常用样式及示例 一.简介 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...
随机推荐
- IOS获取手机设备所有应用
//返回一个数组 1 NSMutableArray *applist = [[NSMutableArray alloc]init]; NSString *pathOfApplications = @& ...
- [RxJS] Stopping a shared observable execution
ConnectableObservable has the connect() method to conveniently dictate the start of the shared execu ...
- linux中内存泄漏的检測(一)最简单的方法
什么是内存泄漏 内存泄漏是指程序动态申请的内存在使用完后没有释放,导致这段内存不能被操作系统回收再利用. 比如这段程序,申请了4个字节的空间但没有释放,有4个字节的内存泄漏. #include < ...
- HDU 1213 How Many Tables 并查集 水~
http://acm.hdu.edu.cn/showproblem.php?pid=1213 果然是需要我陪跑T T,禽兽工作人员还不让,哼,但还是陪跑了~ 啊,还有呀,明天校运会终于不用去了~耶耶耶 ...
- [Vue] Preload Data using Promises with Vue.js and Nuxt.js
Nuxt.js allows you to return a Promise from your data function so that you can asynchronously resolv ...
- thinkphp5项目--练手--企业单车网站(九)(友情链接)
thinkphp5项目--练手--企业单车网站(九)(友情链接) 项目地址 fry404006308/BicycleEnterpriseWebsite: Bicycle Enterprise Webs ...
- tomcat 启动项目时出现 ZipException: error in opening zip file
错误情况 项目用 maven 打好 war 包后放到 tomcat 下,启动 tomcat,出现以下错误 3-Nov-2017 12:21:44.346 严重 [localhost-startStop ...
- Arcengine 实现要素选取的方法(转载)
转自原文Arcengine 实现要素选取的方法(转载) 选择一个要素或者一个要素集(FeatureSelection)的方法很多,如IMap::SelectByShape.ILayer::search ...
- js进阶 11-13 jquery如何包裹元素和去除元素外的包裹
js进阶 11-13 jquery如何包裹元素和去除元素外的包裹 一.总结 一句话总结:wrap().wrapAll().unwrap().innerWrap()四个方法 1.jquery中unwr ...
- 【t049】&&【u001】足球
Time Limit: 1 second Memory Limit: 128 MB [问题描述] 我们当中有很多热爱中国足球的同学,我们都知道中超(中国足球超级联赛)的规则: 一场比赛中,若获胜(即你 ...