HTML中使用CSS样式（上）
在每一个标签上都可以设置style属性，这就是CSS样式：
<div style="height:48px;border: 1px solid red;text-align:center;line-height:48px;">FGF</div>
<div style="height:48px;border: 1px solid red;text-align:center;line-height:48px;">FGF</div>
但是上面的样式没有重用性。如何提高重用性呢？
一、编写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、class选择器
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>
六、属性选择器
对选择到的标签再通过属性再进行一次筛选。
<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)
HTML中使用CSS样式（上）的更多相关文章
- HTML文档中应用css样式的方法总结
在HTML文档中应用css样式大致有三种方法:1.link标签链接外部样式表:2.使用style元素包含样式表:3.使用style属性,即内联样式 一.link标签链接外部样式表 先看一条较为标准的l ...
- JQuery中操作Css样式的方法
JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...
- html5 中的 css样式单 的 两种调用方式的区别
在 html5 中 使用 css 样式单的方式 有4种: 1.链接外部样式文件:将样式文件 彻底与 html 文档分离,样式文件需要额外引入,这种情况下 一批样式 可以控制多份文档.对于好多文件都共有 ...
- js中获取css样式属性值
关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...
- 【转发】JQuery中操作Css样式的方法
JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...
- 记一次项目中的css样式复用
本文同步至微信公众号:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401616238&idx=1&sn=3c6e9 ...
- 在网页中插入CSS样式表的几种方法
1. 链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用<link>标记链接到这个样式表文件,这个<link>标记必须放到页面的<head> ...
- JS中获取CSS样式的方法
1.对于内联样式,可以直接使用ele.style.属性名(当然也可以用键值对的方式)获得.注意在CSS中单词之间用-连接,在JS中要用驼峰命名法 如 <div id="dv" ...
- 聊一聊 React 中的 CSS 样式方案
和 Angular,Vue 不同,React 并没有如何在 React 中书写样式的官方方案,依靠的是社区众多的方案.社区中提供的方案有很多,例如 CSS Modules,styled-compone ...
随机推荐
- C++头文件中的模板类
C++头文件中的模板类 这已经是我的第三篇关于头文件的博客了,没想到我还是踩了个巨坑. 大家都知道要在头文件里声明类成员,在源文件中实现. 但是今天写数据结构作业,在头文件(Stack.h)定义了一个 ...
- [一起面试AI]NO.5过拟合、欠拟合与正则化是什么？
Q1 过拟合与欠拟合的区别是什么,什么是正则化 欠拟合指的是模型不能够再训练集上获得足够低的「训练误差」,往往由于特征维度过少,导致拟合的函数无法满足训练集,导致误差较大. 过拟合指的是模型训练误差与 ...
- Git mergetool 插件
首先你喜欢使用git命令行操作,可以上网下载Kdiff3安装到你的电脑,然后按下面的操作就可以使用这个工具了. 1. 安装Kdiff3 软件.(最好使用默认路径) 2. 添加kdiff3到git me ...
- SQL基础系列(2)-内置函数--转载w3school
1. 日期函数 Mssql: SELECT GETDATE() 返回当前日期和时间 SELECT DATEPART(yyyy,OrderDate) AS OrderYear, DATEPART( ...
- vue（element）中使用codemirror实现代码高亮，代码补全，版本差异对比
vue(element)中使用codemirror实现代码高亮,代码补全,版本差异对比 使用的是vue语言,用element的组件,要做一个在线编辑代码,要求输入代码内容,可以进行高亮展示,可以切换各 ...
- 全方位认识HBase：一个值得拥有的NoSQL数据库（一）
前言:说起HBase这门技术,在认知上对于稍微接触或使用过它的人来讲,可能只是百千数据库中一个很普通的库,大概就像我对Redis的认知一样:缓存嘛!可对于HBase,我确实是带着某些感情在的.今日突然 ...
- jpa是什么,和hibernate 有什么关系
JPA通过JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中.JPA 的目标之一是制定一个可以由很多供应商实现的API,并且开发人员可以编码来实现该API,而不 ...
- 一个java 码手 的老牛 --- 涉及 一些不错的java 基础课程
http://www.zuidaima. com/user/1550463811307520/share/collect.htm
- 一个spring 基本知识的微博（怎么加载多个xml、多个property文件、aop配置、监视器）
http://blog.sina.com.cn/s/blog_61c5866d0100ev44.html
- 2019-07-31【机器学习】无监督学习之聚类 K-Means算法实例 （图像分割）
样本: 代码: import numpy as np import PIL.Image as image from sklearn.cluster import KMeans def loadData ...