html基础之css标签
css style: 里面的写的就叫做css，每一个样式的间隔用英文分号， 全部相同的时候引用class。
css有三种写法：
1.在head标签中增加style标签，在style标签中去写css样式；
2.在标签当中增加style属性，在属性当中写css样式；
3.通过link标签引入写好的css样式表<link rel="stylesheet" href="xxx.css">
css选择器：
1.id选择器；
2.class选择器；
3.标签选择器；
4.层级选择器（空格）；
5.组合选择器（逗号）；
6.属性选择器（中括号）；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双鱼座</title>
<style>
/* id选择器 --> */
#i1{
height: 100px;
width: 100px;
background-color: red;
}
/* class选择器 最常用 */
.c1{
height: 100px;
width: 100px;
background-color: blue;
}
/* 标签选择器 */
span{
color: red;
background-color: blue;
} div{
height: 100px;
width: 100px;
background-color: deeppink;
}
/* 层级选择器 组合选择器 div标签下面所有span标签颜色改变 层级通过空格*/
div span{
background-color: greenyellow;
}
/* class 层级选择器 层级通过空格*/
.c2 span{
background-color: red;
}
/* id 层级选择器 层级通过空格*/
#i2 span{
background-color: aqua;
}
/* 组合选择器 id i3 i4 i5 共用一套css样式 组合 通过逗号*/
#i3,#i4,#i5{
height: 150px;
width: 150px;
background-color: green;
}
/* 组合选择器 class c3 c4 c5 共用一套css样式 组合 通过逗号*/
.c3,.c4,.c5{
height: 100px;
width: 100px;
background-color: chartreuse;
}
/* 属性选择器 对选择到的标签 在通过属性进行筛选 可以和层级选择器连用*/
div[name='dsx']{
background-color: chartreuse;
}
</style>
</head>
<body>
<!--选择器 一个html页面中不可以存在相同的id-->
<div id="i1"></div>
<!--class选择器 以点来定位-->
<div class="c1"></div>
<!-- 全局标签选择器 -->
<span>标签选择器</span>
<!--标签选择器 当前html页面的所有div都会受到影响-->
<div></div>
<!--层级选择器 组合标签选择器-->
<div>
<span>大师兄</span>
</div>
<!--层级选择器 class选择器下的span标签 -->
<div class="c2">
<span>大师兄</span>
</div>
<!--层级选择器 id选择器下的span标签 -->
<div id="i2">
<span>哈哈哈哈哈</span>
</div>
<!--id组合选择器 对这三个div进行同样颜色高度宽度的css样式附着，可以用#i3,#i4,#i5{}-->
<div id="i3"></div><br>
<div id="i4"></div><br>
<div id="i5"></div>
<!--class组合选择器-->
<div class="c3"></div><br>
<div class="c4"></div><br>
<div class="c5"></div>
<!--属性选择器-->
<div name="dsx">属性选择器</div>
</body>
</html>
css样式的优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入css样式 -->
<link rel="stylesheet" href="ss1.css">
<style>
.c1{
background-color: pink;
height:100px;
width:100px;
}
</style>
<!-- 引入css样式 -->
<link rel="stylesheet" href="ss2.css">
</head>
<body>
<div class="c1" style="background-color: blue;height:100px;width:100px"></div>
</body>
</html>
ss1.css文件中的样式如下：
.c1{
background-color: black;
height: 100px;
width: 100px;
}
ss2.css文件中的样式如下：
.c1{
background-color: green;
height: 100px;
width: 100px;
}
四个不同的css样式运用到了同一个标签中，从标签为基准，由下到上依次查找。浏览器所渲染的着色顺序为blue-->green-->pink-->black
height，高度
width，宽度
background-color，背景色
border，边框属性
font-size，字体大小
font-weight，字体加粗，font-weight:字体加粗 bold:粗体 700 bolder:更粗字体 lighter:更细字体 normal:默认值 400 inherit:从父类继承字体粗细
text-align，水平文本对齐方式，left:文本左对齐 right:文本右对齐 center:中间对齐 inherit:父类继承
line-height，垂直文本对齐方式，line-height的属性直接对应外层div的宽度就可以
float，浮动，块级标签浮动后相当于分层，通过浮动可以将块及标签放到一行，相当于不同层，但是超过100%的宽度就会换行，超过100%的宽度，是相对于外层div来判断的。 none:默认不浮动、inherit:父类继承
display，展示属性，块级标签和行内标签之间切换的属性 display:inline，块级标签转换为行内标签 display:block 行内标签转换为块级标签 行内标签无法设置无法设置高度、宽度、padding、margin，可以通过display的display:inline-block，行内标签的自己多大就占多大的特性 又有块级标签使用 宽、高、内外边距的特性
margin-top，外边距，自己针对外围的div产生变化 外边距撑大外层 top left right bottom
padding-top，内边距，自身的边距增加 top：从上到下增加 内边距扩大自身 bottom：从下增加 left：从左增加 right：从右增加
cursor，cursor:pointer 鼠标的小手 cursor:move 有很多种样式
hover，hover属性是当鼠标移动到上面后，设置其样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c2:hover{
background-color: red;
}
</style>
</head>
<body>
<!-- height：高 width：宽 -->
<div style="height: 100px;width: 100px;background-color: chartreuse"></div>
<!--border：宽度 实线还是虚线 颜色 -->
<div style="border: 1px solid red"></div>
<!-- 字体大小 font-size: 14px font-weight: 字体加粗 bold-->
<div style="height: 100px;width: 100px;font-size: larger;font-weight: bolder">字体大小</div>
<!-- 水平文本对齐方式 平行方向左右居中 text-align: center -->
<div style="height: 100px;width: 100px;border: 1px solid red;text-align: center" >双鱼座</div>
<!--垂直文本对齐方式 line-height对应外层div的宽度就可以-->
<div style="height: 100px;width: 100px;border: 1px solid red;text-align: center;line-height: 100px" >双鱼座</div>
<!-- float 浮动 块级标签浮动后 相当于分层 都像左浮动 块级标签会便在一行 如果超过宽度超过100则会换行-->
<div style="height:48px;width: 100px;border: 1px red solid;background-color: red;float: left"></div>
<div style="height:48px;width: 100px;border: 1px red solid;background-color: black;float: left"></div>
<!-- display 属性 展示属性 块级标签和行内标签之间切换的属性 display:inline 块级标签转换为行内标签 -->
<div style="height: 100px;width: 100px;background-color: red;display: inline"></div>
<!-- 把块级标签变为了行内标签。因为行内标签不可以应用宽 高 以及 外边距 内边距 -->
<!-- inline-black既是块又是行内，就有多大占多大，如果是块级标签就占整行 -->
<div style="height: 100px;width: 100px;background-color: red;display: inline-block"></div>
<!-- display：block 内联标签转换为块及标签-->
<span style="height: 100px;background-color: red;display: block;">内联标签</span>
<!-- 块标签转行内标签 block-----inline-block -->
<span style="height: 100px;width: 100px;background-color: chartreuse;display: inline-block"></span>
<!-- 外边距 margin 内边距 padding-->
<!-- margin 外边距 自己针对外围的div产生变化 外边距撑大外层 -->
<div style="height: 100px;width: 100%;border: 1px red solid">
<div style="height: 40px;width: 100%;background-color: red;margin-top: 10px"></div>
</div>
<!-- padding 内边距 自身的边距增加 从上到下增加 内边距扩大自身 -->
<div style="height: 100px;width: 100%;border: 1px red solid">
<div style="height: 40px;width: 100%;background-color: red;padding-top: 10px"></div>
</div>
<!--cursor 一些不同的光标 cursor:pointer 鼠标的小手 cursor:move 元素移动 cursor: crosshair截图-->
<input type="button" style="cursor: pointer" value="鼠标移动的小手">
<input type="button" style="cursor: move" value="元素移动">
<input type="button" style="cursor: crosshair" value="截图">
<!--hover属性是当鼠标移动到上面后，设置其样式-->
<div class="c2" style="width: 100px;height: 100px;border: 1px red solid;color: white">双鱼座</div>
</body>
</html>
position，分层
position：fixed 固定在窗口的某个位置 top：距离顶部多少像素 left right bottom 见body.html
position：relative 与 position：absolute(绝对定位，单用没什么作用 结合relative才牛逼) absolute的定位针对于于relative的定位 单独relative没有任何意义 见body.html
z-index，分层后通过z-index来记录层级关系 越大越在前面
overflow，overflow属性设置当div内的内容溢出div的高宽时，如何处理 默认会出现在元素框之外 hidden：溢出部分截取掉 scroll：超出就出现滚动条
background
background-image，背景图片，图片大小如果小于div的大小。则无限堆叠 水平垂直都堆叠
background-repeat，属性对是否堆叠进行设置 no-repeat(不堆叠) repeat-y(纵向堆叠) repeat-x(横向堆叠)
background-position， 针对div设置图片展示的位置。background-position-y: 10px 纵向移动图片 background-position-x: 10px 横向移动图片。也可以不写x或y，默认第一个为x的值 第二个位y的值，background-position:10px 10px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*background-image：背景图片*/
#i1{
height: 500px;
width: 500px;
border: 1px red solid;
background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg')
}
/*图片大小如果小于div的大小。则无限堆叠 水平垂直都堆叠。*/
/*可通过background-repeat属性对是否堆叠进行设置 no-repeat(不堆叠) repeat-y(纵向堆叠) repeat-x(横向堆叠)*/
#i2{
height: 500px;
width: 500px;
border: 1px red solid;
background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');
background-repeat:no-repeat
}
#i3{
height: 500px;
width: 500px;
border: 1px red solid;
background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');
background-repeat:repeat-x
}
#i4{
height: 500px;
width: 500px;
border: 1px red solid;
background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');
background-repeat:repeat-y
}
/*background-position 设置背景图像的起始位置，可用于图片的切片，下面是两种方式*/
#i5{
height: 20px;
width: 20px;
border: 1px red solid;
background-image: url('http://ui.imdsx.cn/static/image/icon.png');
background-repeat: no-repeat;
background-position:
}
#i6{
height: 20px;
width: 20px;
border: 1px red solid;
background-image: url('http://ui.imdsx.cn/static/image/icon.png');
background-repeat: no-repeat;
background-position-x: ;
background-position-y:
}
</style>
</head>
<body style="margin: 0 auto">
<!--position:fixed 绝对定位-->
<div style="background-color: red;height: 48px;top: 0;left:0;right:0;position: fixed"></div>
<div style="height: 10000px;width: 100%;border: 1px red solid;margin-top: 48px"></div>
<!--absolute的定位针对于于relative的定位 单独relative没有任何意义-->
<div style="width: 200px;height: 200px;border: 1px red solid;position: relative">
<div style="height: 30px;width: 30px;background-color: red;position: absolute;bottom: 0;right: 0"></div>
<div style="height: 30px;width: 30px;background-color: blue;position: absolute;bottom: 0;left: 0"></div>
<div style="height: 30px;width: 30px;background-color: yellow;position: absolute;top: 0;right: 0"></div>
<div style="height: 30px;width: 30px;background-color: green;position: absolute;top: 0;left: 0"></div>
</div>
<!--overflow 超过div部分隐藏起来-->
<div style="height: 100px;width: 100px;border: 1px red solid;overflow: hidden">
<img src="http://ui.imdsx.cn/static/image/dsx.jpg">
</div>
<!--当外层div大于图片时，scroll还会加上滚动条，只是无法滚动而已，而auto就不会，所以应该用auto-->
<div style="height:800px;width: 800px;border: 1px red solid;overflow: scroll">
<img src="http://ui.imdsx.cn/static/image/dsx.jpg">
</div>
<div style="height: 800px;width: 800px;border: 1px red solid;overflow: auto">
<img src="http://ui.imdsx.cn/static/image/dsx.jpg">
</div>
<!--background-image：背景图片-->
<div id="i1" ></div>
<!--图片大小如果小于div的大小。则无限堆叠 水平垂直都堆叠。-->
<!--可通过background-repeat属性对是否堆叠进行设置 no-repeat(不堆叠) repeat-y(纵向堆叠) repeat-x(横向堆叠)-->
<div id="i2" ></div>
<div id="i3"></div>
<div id="i4"></div>
<!--background-position 设置背景图像的起始位置，可用于图片的切片-->
<div id="i5"></div>
<div id="i6"></div>
</body>
</html>
html基础之css标签的更多相关文章
- Bootstrap<基础二十> 标签
Bootstrap 标签.标签可用于计数.提示或页面上其他的标记显示.使用 class .label 来显示标签,如下面的实例所示: <!DOCTYPE html> <html> ...
- Bootstrap<基础一> CSS 概览
HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 B ...
- HTML基础及一般标签
HTML 内容 Hyper Text Markup Language 超文本标记语言(包含文本.表格.图片.声音.视频等,同时也是文档) HTML 元素指的是从开始标签(start t ...
- CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性
大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...
- 前端总结·基础篇·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样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...
- 前端第二篇---前端基础之CSS
前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading ...
- 02 前端基础之CSS
目录 前端基础之CSS css简介 基本选择器(重要) 组合选择器(重点) 属性选择器 分组与嵌套 伪类选择器 伪元素选择器 选择器的优先级 字体相关 背景属性 边框属性 display属性 盒子模型 ...
随机推荐
- XP 终端服务组件 ，SP3 多用户补丁（替换）文件
如附件 termsrv.dll 5.1.2600.5512 目前存在一个问题:每个用户只能使用一个会话.不能像2003+那样,一个用户使用多个会话. 待查找解决方案中............... ...
- 查询_修改SQL Server 2005中数据库文件存放路径
1.查看当前的存放路径: select database_id,name,physical_name AS CurrentLocation,state_desc,size from sys.maste ...
- AI逻辑实现-取舍行为树还是状态机
AI逻辑实现-选择行为树还是状态机? 关注AI的朋友可能会看过赖勇浩翻译的<有限状态机时代终结的10大理由> ,里面谈到了状态机的诸多弊端.同时在ppt(附上下载地址)中述说了行为树的诸多 ...
- UGUI之Canvas和EventSystem
先介绍一下UGUI必不可缺的两个组件:Canvas和EventSystem 事实上在场景中第一次创建UGUI控件的时候,这两个物体都会自动添加到场景中,当然,必不可缺的不是这两个物体,而是他们身上挂载 ...
- 倾斜摄影 实景三维建模软件photoscan教程
PhotoScan是一款基于影响自动生成高质量实景三维模型的优秀软件,这对于3D建模需求来说实在是一把利器. PhotoScan无需设置初始值,无须相机检校,它根据最新的多视图三维重建技术,可对任意照 ...
- Android Studio右下角不显示当前branch名称
当一个project刚从git server端clone下来并open后,或许你会发如今Android Studio的右下角看不到当前是哪个branch的信息.例如以下图: 原因分析:不显示的原因是由 ...
- api数据接口
阿凡达数据 http://www.avatardata.cn/ 聚合数据 https://www.juhe.cn/
- vue.js2.0+elementui ——> 后台管理系统
前言: 因为观察到vue.js的轻量以及实时更新数据的便捷性,于是新项目便决定使用vue.js2.0以及与之配套的elementui来完成.只是初次接触新框架,再使用过程中,遇见了各种各样“奇葩”的问 ...
- cocos2d-x游戏引擎核心之六——绘图原理和绘图技巧
一.OpenGL基础 游戏引擎是对底层绘图接口的包装,Cocos2d-x 也一样,它是对不同平台下 OpenGL 的包装.OpenGL 全称为 Open Graphics Library,是一个开放的 ...
- 使用boch仿真器在x86 PC平台上搭建Linux0.11系统环境(windows下)
当你有机会来到这页面时 十有八九是遇到这样一个问题 执行配置文件bochsrc_fd.bxrc时出现找不到 ips的情况! 版本原因吧 将boch版本换成2.4的问题就迎刃而解了~ 简单 ...