前端逼死强迫症系列之css
一、编写css样式
1.ID选择器
由于ID唯一，所以也是写多遍。
<head>
<style>
#i1{
background-color: #2459a2;
height: 48px;
}
#i2{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div id="i1">ff</div>
<div id="i2">ff</div>
</body>
2.css选择器
class选择器是最常用的。
<head>
<style>
.c1{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div class="c1">ff</div>
<div class="c1">ff</div>
</body>
3.标签选择器
不管那一层，只要是这个标签就应用这个样式。
<head>
<style>
div{
background-color: black;
color: white;
}
</style>
</head>
<body>
<div >ff</div>
<span >f
<div >fgf</div>
</span>
</body>
4.层级选择器
也叫关联选择器。如下：span里面的div才应用样式
<head>
<style>
span div{
background-color: black;
color: white;
}
</style>
</head>
<body>
<div >ff</div>
<span >f
<div >fgf</div>
</span>
</body>
层级也可以标签和类选择器做层级，比如
.c1 .c2 div a h1{
}
5.组合选择器
ID组合
<head>
<style>
#i1, #i2{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div id="i1">ff</div>
<div id="i2">ff</div>
</body>
class 组合
<head>
<style>
.c1, .c2{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div class="c1">ff</div>
<div class="c2">ff</div>
</body>
6.属性选择器
对选择到的标签再通过属性再进行一次筛选
<head>
<style>
.c1[type="text"]{ width:100px; height:200px; }
input[name="fgf"]{width:40px; height:40px; }
</style>
</head>
<body>
<input class="c1" type="text" n="alex">
<input class="c1" name="fgf" type="password">
</body>
二、css的存在形式及优先级
如果对一个内容指定多个样式，样式没有重合，就都应用上了。
如果有重合，优先级，标签上style优先，编写顺序，就近原则,越往下越优先。
<head>
<link rel="stylesheet" href="css/commons.css" />
<!--引入CSS文件-->
.c1{
background-color: #2459a2;
height: 10px;
}
<!--优先级：看是这里c1写在下面，还是c2在下面-->
.c2{
}
</head>
<body>
<div class="c1 c2" style="color: pink">asdf</div>
</body>
css文件写法，直接写，不用再写<style>
.c1{
background-color: #2459a2;
height: 10px;
}
<!--优先级：看是这里c1写在下面，还是c2在下面-->
.c2{
}
三、css边框以及其他常用样式
<body>
<div style="border: 1px solid red;">
<!--border：边框；solid：实体的-->
asdfasdf
</div>
<div style="height: 48px; /*高度（像素）*/
width:80%; /*宽度（百分比）*/
border: 2px dotted red;
/*dotted：虚线的 （border-left）*/
font-size: 16px; /*字体大小*/
text-align: center; /*水平居中*/
line-height: 48px; /*垂直居中根据标签高度*/
font-weight: bold; /*字体加粗*/
color: white; /*字体颜色*/
background-color: lawngreen; /*背景色*/
">asdf</div>
</body>
四、css之float样式
html标签中，div是块级标签，一个标签占一整行。显然好多网站都是分左右栏的，那怎么实现呢？
这里就需要用到float样式，让块级标签飘起来。自己有多少占多少。
<body>
<div style="width: 20%;background-color: red;float: left">1</div>
<div style="width: 50%;background-color: black;float: left">2</div>
<div style="width: 20%;background-color: blue;float: right">2</div>
</body>
float飘起来之后，撑不起父标签，需要加一句，如下。
<div style="width: 300px;border: 1px solid red;">
<div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
<div style="clear: both;"></div>
<!--float有个坑：孩子飘起来了，父亲没飘起来，就撑不起来了，需要加上上面那一句。-->
</div>
五、css之display样式
******
行内标签：无法设置高度，宽度，padding margin
块级标签：设置高度，宽度，padding margin display: none; -- 让标签消失
display: inline; -- 让标签变成行内标签
display: block; -- 让标签变成块级标签
display: inline-block; -- 拥有两者的属性↓
具有inline,默认自己有多少占多少
具有block，可以设置无法设置高度，宽度，padding margin
六、css之内外边距
- margin：外边距（离上面的边距增加了，本身没有增加。）
- padding：内边距（上边边距增加了，自身内部增加边距。）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 38px;
background-color: #dddddd;
line-height: 38px;
}
</style>
</head>
<body style="margin: 0">
<div class="pg-header">
<div style="width: 980px;margin: 0 auto;">
<!--margin: 0 auto; 网页上边距为零，置顶；auto：当前宽度左右居中-->
<div style="float: left;">收藏本站</div>
<div style="float: right;"><a>登录</a></div>
<div style="clear: both"></div>
</div>
</div>
</body>
</html>
七、css总结
CSS
在标签上设置style属性：
background-color: #2459a2;
height: 48px;
...
编写css样式：
1. 标签的style属性
2. 写在head里面 style标签中写样式
- id选择区
#i1{
background-color: #2459a2;
height: 48px;
}
- class选择器 ******
.名称{
...
}
<标签 class='名称'> </标签>
- 标签选择器
div{
...
}
所有div设置上此样式
- 层级选择器（空格） ******
.c1 .c2 div{
}
- 组合选择器（逗号） ******
#c1,.c2,div{
}
- 属性选择器 ******
对选择到的标签再通过属性再进行一次筛选
.c1[n='alex']{ width:100px; height:200px; }
PS:
- 优先级，标签上style优先，编写顺序，就近原则
2.5 css样式也可以写在单独文件中
<link rel="stylesheet" href="commons.css" />
3、注释
/* */
4、边框
- 宽度，样式，颜色 (border: 4px dotted red;)
- border-left
5、
height， 高度 百分比
width， 宽度 像素，百分比
text-align:center, 水平方向居中
line-height，垂直方向根据标签高度
color、 字体颜色
font-size、 字体大小
font-weight 字体加粗
6、float
让标签飘起来，块级标签也可以堆叠
老子管不住：
<div style="clear: both;"></div>
7、display
display: none; -- 让标签消失
display: inline; -- 让标签变成行内标签
display: block; -- 让标签变成块级标签
display: inline-block; -- 拥有两者的属性↓
具有inline,默认自己有多少占多少
具有block，可以设置无法设置高度，宽度，padding margin
******
行内标签：无法设置高度，宽度，padding margin
块级标签：设置高度，宽度，padding margin
8、padding margin(0,auto)
前端逼死强迫症系列之css的更多相关文章
- 前端逼死强迫症系列之Html
概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器 ...
- 前端逼死强迫症系列之javascript
JavaScript 和Python.C#.Java.Ruby一样,都是一门独立的编程语言. 像python.C.Java等都需要解释器,学习它们的语法.而浏览器本身就是javascript的解释器. ...
- 前端逼死强迫症系列之javascript续集
一.javascript函数 1.普通函数 function func(){ } 2.匿名函数 setInterval(function(){ console.log(123); },5000) 3. ...
- 前端逼死强迫症之css续集
上节内容回顾 如果点击图片调转到连接,a标签下套img标签,在IE有的版本中,会有蓝色边框. 因为a标签默认字体颜色就是蓝色,img标签继承了父级标签,而IE浏览器默认给边框加了宽度.解决: < ...
- 前端逼死强迫症之DOM
Dom:document.相当于把所有的html文件,转换成了文档对象. 之前说过:html-裸体的人:css-穿上衣服:js-让人动起来. 让人动起来,就得先找到他,再修改它内容或属性. 找到标签 ...
- 【PC网站前端架构探讨系列】关于中小型PC网站前端架构方案的讨论与实践
目 录 1.遇到的问题 2.目标 3.探讨 4.架构设想 5.流程 6.初步实现 7.存在问题 8.最后 遇到的问题 我在这个系列上篇文章 已经讲解并开始逐步应用模块化思想,不知大家还记不记得,题 ...
- 王下邀月熊_Chevalier的前端每周清单系列文章索引
感谢 王下邀月熊_Chevalier 分享的前端每周清单,为方便大家阅读,特整理一份索引. 王下邀月熊大大也于 2018 年 3 月 31 日整理了自己的前端每周清单系列,并以年/月为单位进行分类,具 ...
- (转)BAT及各大互联网公司2014前端笔试面试题--Html,Css篇
BAT及各大互联网公司2014前端笔试面试题--Html,Css篇 很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是 ...
- 前端自动化(三) 合并压缩css、压缩js、添加时间戳、打包上线操作
前端自动化(三) 合并压缩css.压缩js.添加时间戳.打包上线操作 此文在前两篇基础上对比参考,会很方便理解 gulp.task("delete",function(){ r ...
随机推荐
- 怎样理解new命令的执行过程
通过new命令生成一个实例对象经历了四个步骤: 1. 创建一个空对象, 作为将要返回的实例; 2. 将空对象的原型指向构造函数的prototype属性; 3. 将空对象赋值给构造函数的this; 4. ...
- 写给Web开发人员看的Nginx介绍
译者注:不知道其他开发者是否和我一样,参与或者写了很多Web项目,但是却没有真正的去完整的部署应用,很多时候都是交给ops即运维的同学帮忙来做.而作为一个有节操的开发者,我认为了解一些服务器方面的知识 ...
- K2 BPM_当BPM遇上RPA | 企业合规和风险管理从此更高效_全球领先的工作流引擎
强化企业合规与风险管理已成为全球企业发展的共识,尤其是对于药企.银行.地产这类对于合规性要求高的企业而言,识别预测潜在的管理风险和遵循不断升级的合规义务,是保证企业平稳运行的关键. 如何从流程层面降低 ...
- Java基础加强-类加载器
/*类加载器*/ 把.class文件从硬盘上加载出来,将类的字节码(二进制)加载到内存中 /*类加载器及其委托机制*/ Java虚拟机中可以安装多个类加载器(可以自己编写),系统默认三个主要类加载器, ...
- 解决PHP 7编译安装错误：cannot stat ‘phar.phar’: No such file or directory
最近因为工作需要要使用PHP 7,所以从网上找教程进行安装, 结果编译没问题, 安装的时候报了错误. 错误如下 1 2 3 cp -pR -f phar.phar /usr/local/php7/bi ...
- innodb是如何巧妙实现事务隔离级别-转载
原文地址:innodb是如何巧妙实现事务隔离级别 之前的文章mysql锁机制详解中我们详细讲解了innodb的锁机制,锁机制是用来保证在并发情况下数据的准确性,而要保证数据准确通常需要事务的支持,而m ...
- mesos-master启动失败，报错Failed to load unknown flag 'quorum.rpmsave'
[现象] mesos启动失败,查看mesos状态报错: [root@hps102 ~]# systemctl status mesos-master ● mesos-master.service - ...
- Linux 01 LiunxvI命令大全
进入vi的命令 vi filename :打开或新建文件,并将光标置于第一行首 vi +n filename :打开文件,并将光标置于第n行首 vi + filename :打开文件,并将光标置于最后 ...
- keil 选项卡设置
*1.optimization : level2. *2. 2)硬件目标设置选项卡(Target),见图6所示. 图6 1:选择硬件目标设置选项卡 2:指定用于的晶振频率 3:在应用中可以选择实时操 ...
- 特殊权限 - SUID GUID STICKYBIT
◆ SUID ( Set User ID ) Linux里,用户的ID被称作UID.在实际生产中,可能需要临时借用别的用户执行程序,因此需要能够临时变更自己UID的机能叫做SUID.借助SUID权限, ...