html学习-第二集（CSS）
head标签里面添加style标签，可以为标签添加样式
id选择器
类选择器
标签选择器
层级选择器
组合选择器
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
background-color:#2459a2;
height:48px;
}
.c1{
background-color:#2889a2;
height:20px;
}
div{
background-color:black;
color:white;
} span div {
background-color:red;
color:black;
} input[type='text']{width:100px;height:200px;} </style> </head>
<body>
<div id="i1">fffffff</div>
<span class="c1">ddddddd
<div>ututututu</div>
</span>
<div id="i1">ggggggg</div> <input type="text">
<input type="password">
</body>
</html>
样式优先级问题
标签上的style优先，其他编写顺序，就近原则，后写的优先
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.c2{
font-size:28px;
color:black;
}
.c1{
background-color:red;
color:white;
} </style>
</head>
<body>
<div class="c2 c1" style="color:pink;">adafaf</div>
<div class="c2 c1" style="color:pink;">adafaf</div> </body>
</html>
CSS文件用法
CSS文件
common.css
c2{
font-size:28px;
color:black;
}
.c1{
background-color:red;
color:white;
}
然后在html文件里面引用css文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/common.css" />
</head>
<body>
<div class="c2 c1" style="color:pink;">adafaf</div> </body>
</html>
CSS边框
<div style="
height:48px; 高度
width:70%; 宽度 像素 百分比
border:1px solid red; 边框
font-size:16px; 字体大小
text-align:center; 水平方向居中
vertical-align:middle;
line-height:48px; 垂直方向根据标签高度居中
font-weight: bold; 字体加粗
">fdffdffd</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="border:1px solid red;">adfdfdfdf</div>
<div style="height:48px;
width:70%;
border:1px solid red;
font-size:16px;
text-align:center;
vertical-align:middle;
line-height:48px;
font-weight: bold;
">fdffdffd</div>
</body>
</html>
CSS float样式
简单例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.pg-header{
height:38px;
background-color:#dddddd;
line-height:38px;
}
</style>
</head>
<body style="margin:0 auto;">
<div class="pg-header">
<div style="width:980px;margin:0 auto;">
<div style="float:left;">收藏本站</div>
<div style="float:right;">
<a>登录</a>
<a>注册</a>
</div>
<div style="clear:both"></div>
</div>
</div>
<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="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="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>
</div>
</body>
</html>
CSS display样式
可以将块级标签和行内标签转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="background-color:red;display:inline;">asdf</div>
<span style="background-color:red;display:block;">asdf</span>
</body>
</html>
注意：
行内标签 无法设置宽度 高度 padding margin
块级标签 设置宽度 高度 padding margin
display样式还有一个inline-block属性
display:none让标签消失
内边距和外边距
padding margin(0.auto)
边距，
内边距 padding
外边距 margin
结束
html学习-第二集（CSS）的更多相关文章
- SIGAI深度学习第二集 人工神经网络1
讲授神经网络的思想起源.神经元原理.神经网络的结构和本质.正向传播算法.链式求导及反向传播算法.神经网络怎么用于实际问题等 课程大纲: 神经网络的思想起源 神经元的原理 神经网络结构 正向传播算法 怎 ...
- springboot学习——第二集：整合Mybaits
1,Mybatis动态插入(insert)数据(使用trim标签):https://blog.csdn.net/h12kjgj/article/details/55003713 2,mybatis 中 ...
- NanUI for Winform 使用示例【第二集】——做一个所见即所得的Markdown编辑器
经过了这一个多星期的调整与修复,NanUI for .NET Winform的稳定版已经发布.应广大群友的要求,现已将NanUI的全部代码开源. GitHub: https://github.com/ ...
- HTML学习第二天
HTML学习第二天 今天学的比较少,有些乱,先只写一个知识点 三种样式表插入方式 外部样式表: <link rel="stylesheet" type="text/ ...
- SpringBoot第二集：注解与配置（2020最新最易懂）
2020最新SpringBoot第二集:基础注解/基础配置(2020最新最易懂) 一.Eclipse安装SpringBoot插件 Eclipse实现SpringBoot开发,为便于项目的快速构建,需要 ...
- Mysql基础学习第二天
Mysql基础学习第二天 函数 函数:是指一段可以直接被另一段程序调用的程序或代码. 字符串函数 数值函数 日期函数 流程函数 字符串函数 MySQL内置很多字符串函数,常用的几个如下: 函数 功能 ...
- 我们应当怎样学习HTML和CSS
目标读者:web前端小白.大神请绕路 学习一门新技术,应当找一本经典入门书,在两三天之内快速翻阅完毕,了解其概貌. 然后再制定一个学习路线图(这个路线图绝大多数情况下非书本目录的顺序),接着遵循学习路 ...
- 前端学习 第二弹: JavaScript中的一些函数与对象（1）
前端学习 第二弹: JavaScript中的一些函数与对象(1) 1.apply与call函数 每个函数都包含两个非继承而来的方法:apply()和call(). 他们的用途相同,都是在特定的作用域中 ...
- 二、Android学习第二天——初识Activity（转）
(转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 一. Android学习第二天——初识Activity 昨天程序搭建成功以 ...
随机推荐
- JDK8-》 ⽅法引⽤与构造函数引⽤
以前⽅法调⽤ 对象.⽅法名 或者 类名.⽅法名 jdk1.8提供了另外⼀种调⽤⽅式 :: 说明:⽅法引⽤是⼀种更简洁易懂的lambda表达式,操作符是双冒号::,⽤来直接访问类或者实例 已经存在的 ...
- 2.js将Date对象转换成“2018-05-10”字符串格式化的时间
//拼接0 $cms.joint0 = function(val) { if (val < 10) return "0"+val; return val; } //时间格式化 ...
- Gol流程控制
条件语句 if语句 if 布尔表达式 { }else 布尔表达式{ }else{ } if语句后的{,一定要和if条件写在同一行,否则报错 else一定要在if语句}之后,不能自己另起一行 if语句变 ...
- Postman：下载安装与基本介绍
1.下载: (1)官网APP: https://www.getpostman.com/ (即: https://app.getpostman.com/app/download/win64 ) (2)插 ...
- CentOS 7升级gcc版本
Centos 7默认gcc版本为4.8,有时需要更高版本的,这里以升级至8.3.1版本为例,分别执行下面三条命令即可,无需手动下载源码编译 1.安装centos-release-scl sudo yu ...
- JavaScript对象之原型链
一个js对象,除了自己设置的属性外,还会自动生成proto.class.extensible属性,其中,proto属性指向对象的原型. 对象的属性也有writable.enumerable.confi ...
- PLL
PLL(Phase Locked Loop): 为锁相回路或锁相环,用来统一整合时脉讯号,使内存能正确的存取资料.PLL用于振荡器中的反馈技术. 许多电子设备要正常工作,通常需要外部的输入信号与内部的 ...
- 麦子html基础
一.基础语法 1.基本结构
- css美化Div边框的样式实例*（转载）
css美化Div边框的样式实例 很多时候如果不是用了很多样式,很难把边框修饰得好看,看了一篇博文,觉得真的挺漂亮,也挺好看. 转载的博文地址 将这段美化的css代码 border:1px soli ...
- ajax异步获取请求，获得json数组后对数组的遍历
如果响应数据是以html的形式发出来的,即 response.setContentType("text/html;charset=utf-8"); 那么一般用下面这种方式,但是要注 ...