HTML基础之CSS
CSS选择器
1、id选择器
2、class选择器
3、标签选择器
4、层级选择器（空格）
5、组合选择器（逗号）
6、属性选择器（中括号） <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* id选择器 --> */
#i1{
height: 48px;
background-color: red;
} /* class选择器 最常用 */
.div{
height: 48px;
background-color: aqua;
} /* 标签选择器 */
span{
color: red;
background-color: blue;
} /* 层级选择器 组合选择器 span标签下面所有div标签颜色改变 层级通过空格*/
span div{
color: aqua;
background-color: red;
} /* class 层级选择器 层级通过空格*/
.c1 div{
background-color: #336699;
height: 48px;
} /* id 层级选择器 层级通过空格*/
#i2 div{
background-color: black;
height: 48px;
} /* 组合选择器 id z1 z2 z3 共用一套css样式 组合 通过逗号*/
#z1,#z2,#z3{
background-color: chocolate;
height: 48px;
} /* 组合选择器 class s1 s2 s3 共用一套css样式 组合 通过逗号*/
.s1,.s2,.s3{
background-color: darkmagenta;
height:48px;
} /* 属性选择器 对选择到的标签 在通过属性进行筛选 可以和层级选择器连用*/
div[s='dsx']{
background-color: darkred;
height: 48px;
} </style>
</head>
<body> <!-- css style: 里面的写的就叫做css 每一个样式的间隔用； 全部相同的时候引用class-->
<div style="height: 48px;</div>
<div style="height: 48px;background-color: #6699CC"></div>
<div style="height: 48px;background-color: #6699CC"></div> <!-- css class引用-->
<div id="i1"></div>
<div class="div"></div>
<div class="div"></div> <!-- 全局标签选择器 -->
<span>标签选择器</span> <!-- 层级选择器 组合标签选择器 -->
<span>
<div>组合标签选择器</div>
</span> <!--层级选择器 class选择器下的div标签 -->
<div class="c1">
<div></div>
</div> <!--层级选择器 id选择器下的div标签-->
<div id="i2">
<div></div>
</div> <!-- id组合选择器 -->
<div id="z1"></div>
<div id="z2"></div>
<div id="z3"></div> <!-- class组合选择器 -->
<div class="s1"></div>
<div class="s2"></div>
<div class="s3"></div> <!-- 属性选择器 -->
<div s="csf"></div>
<div name="nn"></div>
</body>
</html>
CSS优先级
标签中style优先级最高，其次在代码中就近找，也就是重下往上找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* css 优先级 */
.c1{
background-color: darkred;
height: 48px;
}
.c2{
background-color: black;
height: 48px;
}
</style>
</head>
<body>
<div class="c1 c2" style="</div>
</body>
</html> /* 引入CSS文件 */ <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入css样式 -->
<link rel="stylesheet" href="tmp.css">
</head>
<body>
<div class="c1 c2" style="background-color: aqua"></div>
</body>
</html>
CSS属性
height、width、font-size、font-weight、text-align、line-height、float、display、margin、padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="margin: 0;">
<!-- 边框 border：宽度 实线还是虚线 颜色-->
<div style="height: 48px;border: 1px solid red"></div>
<!-- 边框 border 上下左右边框 都可单独配置 -->
<div style="height: 48px;border-left: 1px dotted red"></div>
<!-- height：高 width：宽 -->
<div style="height: 48px;width: 48px;border: 1px solid red"></div>
<!-- 宽高的设定可以是指定的像素 也可以百分比 -->
<div style="height: 48px;width: 80%;border: 1px solid red"></div>
<!-- 字体大小 font-size: 14px font-weight: 字体加粗 bold-->
<div style="height: 48px;width: 80%;border: 1px solid red;font-size: 14px;font-weight: bold"></div>
<!-- 平行方向左右居中 text-align: center -->
<div style="height: 48px;width: 80%;border: 1px solid red;font-size: 14px;text-align: center">尘世风</div>
<!-- 垂直方向居中 line-height：垂直方向要根据标签高度-->
<div style="height: 48px;width: 80%;border: 1px solid red;font-size: 14px;text-align: center;line-height: 48px">尘世风</div>
<!-- float 浮动 块级标签浮动后 相当于分层 都像左浮动 块级标签会便在一行 如果超过宽度超过100则会换行-->
<div style="width: 20%;float: left">1</div>
<div style="background-color: red;width: 20%;float:left;">2</div>
<div style="background-color: black;width: 20%;float:right;">3</div>
<!-- 块及标签的占满100%是相对来说，相对与他外层的div -->
<div style="width: 400px;height: 400px;border: 1px solid black;">
<div style="width: 100px;height: 40px;background-color: red;float:left;"></div>
<div style="width: 100px;height: 40px;background-color: blue;float:left;"></div>
<div style="width: 100px;height: 40px;background-color: red;float:left;"></div>
<div style="width: 100px;height: 40px;background-color: blue;float:left;"></div>
<div style="width: 100px;height: 40px;background-color: red;float:left;"></div>
</div> <!-- display 属性 展示属性 块级标签和行内标签之间切换的属性 display:inline 块级标签转换为行内标签-->
<div style="height: 100px;background-color: black;display: inline">外联标签</div>
<!-- display：block 内联标签转换为块及标签-->
<span style="height: 100px;background-color: red;display: block;">内联标签</span>
<!-- 行内标签：无法设置高度、宽度、padding、margin-->
<span style="background-color: blue;width: 100px;height: 100px;">尘世风</span>
<!-- 通过display:inline-block 可以完美的解决这个问题 他既有行内标签的自己多大就占多大的特性 又有块级标签使用 宽、高、内外边距的特性-->
<span style="background-color: blue;width: 100px;height: 100px;display: inline-block;">尘世风</span>
<!-- 让标签消失 display：none-->
<span style="background-color: #336699;display: none">我不显示的</span> <!-- 外边距 margin 内边距 padding-->
<!-- margin 外边距 自己针对外围的div产生变化 外边距撑大外层 -->
<div style="border: 1px solid red;height: 100px">
<div style="background-color: blue;height: 70px;margin-top: 30px"></div>
</div>
<!-- padding 内边距 自身的边距增加 从上到下增加 内边距扩大自身 -->
<div style="border: 1px solid red;height: 100px">
<div style="background-color: blue;height: 70px;padding: 10px">内边距增加</div>
</div>
</body>
</html>
例子
各个网站的header
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="margin: 0;">
<div class="p-header" style="width: 100%;">
<div style="width: 980px;margin: 0 auto">
<div style="height: 48px;line-height: 48px;float: left">收藏本站</div>
<div style="height: 48px;line-height: 48px;float: right">登录</div>
<div style="height: 48px;line-height: 48px;float: right">注册</div>
<!-- clear:both 清除浮动，将内层div拉下来从而撑开外层div-->
<div style="clear: both"></div>
</div>
</div>
</body>
</html>
HTML基础之CSS的更多相关文章
- Bootstrap<基础一> CSS 概览
HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 B ...
- CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性
大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...
- 前端总结·基础篇·CSS（一）布局
目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...
- 前端总结·基础篇·CSS（二）视觉
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...
- 前端总结·基础篇·CSS（三）补充
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 目录 一.移动端 1.1 视口(viewport) 1.2 媒体查询(medi ...
- #WEB安全基础 : HTML/CSS | 文章索引
本系列讲解WEB安全所需要的HTML和CSS #WEB安全基础 : HTML/CSS | 0x0 我的第一个网页 #WEB安全基础 : HTML/CSS | 0x1初识CSS #WEB安全基础 : H ...
- css基础--常用css属性02
上篇地址:css基础--常用css属性01 本文参考菜鸟教程和w3school 1 浮动和清除浮动 在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和 ...
- 前端基础：CSS样式选择器
前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...
- 前端总结·基础篇·CSS
前端总结·基础篇·CSS 1 常用重置+重置插件(Normalize.css,IE8+) * {box-sizing:border-box;} /* IE8+ */body {margin:0;} ...
- 前端第二篇---前端基础之CSS
前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading ...
随机推荐
- .NET实现自动编译
前言 因每次发布版本的时候,都需要打开vs项目,然后进行编译.如果刚好手里有文件在修改,就需要先签入之类的.所以想找个可以实现自动编译的工具. 在网上查询了不少资料,终于基本上实现了自动编译的功能.因 ...
- 像azure一样桌面显示Windows系统信息
介绍 我们在使用azure的公有云时,可以看到打开虚拟机时右上角可以显示系统配置信息和公网私有地址,很好奇如何做到的,终于经过询问一位微软的朋友,他帮我找到了这个工具 工具地址:https://tec ...
- Idea2018版本建的项目总是找不到主类
最近更新idea到2018,总是遇见无法加载到主类,刚开始以为是装的过程有什么搞错了,但重装好几遍都是,换成2017又恢复正常,最后发现聪明的同学找到了个偏门可以解决. 那就是先创建文件夹,然后在创建 ...
- 详解--从地址栏输入url到页面展现中间都发生了什么？
这是一个综合性很强的问题,个人理解包含以下七个基本点: 1.在浏览器地址栏输入url并按下回车. 2.浏览器检查当前url是否存在缓存和缓存是否过期. 3.域名解析(DNS解析url对应的ip). 4 ...
- 【转】IE内嵌google chrome frame解决浏览器兼容问题
参考文献: http://www.pseudowired.com/2012/12/04/tomcat-http-header-manipulation/(html中自动添加使用chrome的heade ...
- opengl渲染管线梳理
opengl渲染管线梳理 http://www.cnblogs.com/zhanglitong/p/3238989.html 坐标系变换和矩阵 http://www.cppblog.com/guoji ...
- Redis 4.x 安装及 发布/订阅实践和数据持久化设置
1.或者源码安装包 #wget http://download.redis.io/releases/redis-4.0.6.tar.gz 2.解压源码包 #tar -zxf redis-4.0.6.t ...
- MySQL数据类型字节长度
1.字符串 char(n): n 字节长度 varchar(n): 如果是 utf8 编码, 则是 3 n + 2字节; 如果是 utf8mb4 编码, 则是 4 n + 2 字节. 2.数值类型: ...
- C++之强制类型转化
在C++语言中新增了四个关键字static_cast.const_cast.reinterpret_cast和dynamic_cast.这四个关键字都是用于强制类型转换的.我们逐一来介绍这四个关键字. ...
- Java 中long类型转换成为int类型时可能会出错的地方
那计算两个日期之间间隔的天数为例来说明这个问题. 下面是计算日期间隔天数的简单算法(主要出错的地方为红色标注的地方): public int getDay(String startDate, Stri ...