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)的更多相关文章

  1. SIGAI深度学习第二集 人工神经网络1

    讲授神经网络的思想起源.神经元原理.神经网络的结构和本质.正向传播算法.链式求导及反向传播算法.神经网络怎么用于实际问题等 课程大纲: 神经网络的思想起源 神经元的原理 神经网络结构 正向传播算法 怎 ...

  2. springboot学习——第二集:整合Mybaits

    1,Mybatis动态插入(insert)数据(使用trim标签):https://blog.csdn.net/h12kjgj/article/details/55003713 2,mybatis 中 ...

  3. NanUI for Winform 使用示例【第二集】——做一个所见即所得的Markdown编辑器

    经过了这一个多星期的调整与修复,NanUI for .NET Winform的稳定版已经发布.应广大群友的要求,现已将NanUI的全部代码开源. GitHub: https://github.com/ ...

  4. HTML学习第二天

    HTML学习第二天 今天学的比较少,有些乱,先只写一个知识点 三种样式表插入方式 外部样式表: <link rel="stylesheet" type="text/ ...

  5. SpringBoot第二集:注解与配置(2020最新最易懂)

    2020最新SpringBoot第二集:基础注解/基础配置(2020最新最易懂) 一.Eclipse安装SpringBoot插件 Eclipse实现SpringBoot开发,为便于项目的快速构建,需要 ...

  6. Mysql基础学习第二天

    Mysql基础学习第二天 函数 函数:是指一段可以直接被另一段程序调用的程序或代码. 字符串函数 数值函数 日期函数 流程函数 字符串函数 MySQL内置很多字符串函数,常用的几个如下: 函数 功能 ...

  7. 我们应当怎样学习HTML和CSS

    目标读者:web前端小白.大神请绕路 学习一门新技术,应当找一本经典入门书,在两三天之内快速翻阅完毕,了解其概貌. 然后再制定一个学习路线图(这个路线图绝大多数情况下非书本目录的顺序),接着遵循学习路 ...

  8. 前端学习 第二弹: JavaScript中的一些函数与对象(1)

    前端学习 第二弹: JavaScript中的一些函数与对象(1) 1.apply与call函数 每个函数都包含两个非继承而来的方法:apply()和call(). 他们的用途相同,都是在特定的作用域中 ...

  9. 二、Android学习第二天——初识Activity(转)

    (转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 一. Android学习第二天——初识Activity 昨天程序搭建成功以 ...

随机推荐

  1. day03_2hibernate

    HQL.QBC详解.c3p0连接池的整合.事务的隔离级别.乐观锁.悲观锁 一.HQL详解: ①关于HQL的使用语法:[select/update/delete...][from...][类名 as  ...

  2. dmesg用法

    百科概念:dmesg是一种程序,用于检测和控制内核环缓冲.程序用来帮助用户了解系统的启动信息. 解释:dmesg命令显示linux内核的环形缓冲区信息,我们可以从中获得诸如系统架构.cpu.挂载的硬件 ...

  3. ubuntu18+caffe+cuda

    昨天安装caffe,因为用的是cuda10.2,遇到各种问题,最终也没有安装成功.使用cmake配置成功.生成成功.编译的时候报错. /usr/local/cuda/include/cuda_runt ...

  4. Laravel-admin 刷新页面后,左侧菜单栏怎么默认选中当前栏目

    修改public\vendor\laravel-admin\laravel-admin里面的laravel-admin.js $(window).on('load',function(){ $('.s ...

  5. MyBatis使用步骤及原理

    主要讲解MyBatis-基本使用步骤      回顾:     MyBatis是一个数据持久层(ORM)框架.把实体 类和SQL语句之间建立了映射关系,是一种半自 动化的ORM实现.MyBATIS需要 ...

  6. Mybaits的中的对象映射(包含仅有基本数据类型的属性的和对象类型的属性的)

    转:https://blog.csdn.net/cjt20100/article/details/46547617. 1 constructor – 用来将结果反射给一个实例化好的类的构造器    a ...

  7. C#中字节数组byte[]和字符串string类型的相互转换

    C#中字节数组byte[]和字符串string类型的相互转换: string转byte[]: byte[] byteArray = System.Text.Encoding.Default.GetBy ...

  8. unity命令行参数

    Typically, Unity will be launched by double-clicking its icon from the desktop but it is also possib ...

  9. DVWA全级别之XSS(Reflected)、XSS(Stored)【跨站脚本攻击】

    XSS XSS,全称Cross Site Scripting,即跨站脚本攻击,某种意义上也是一种注入攻击,是指攻击者在页面中注入恶意的脚本代码,当受害者访问该页面时,恶意代码会在其浏览器上执行,需要强 ...

  10. jenkins常用

    记最精简版的启动:gradle集成springboot+vue 安装jenkins,安装待推荐插件 服务器安装gradle 服务器安装npm 配置git仓库,配置git开发者账号等 配置gradle构 ...