HTML学习之==>CSS
一、CSS选择器
id选择器
class选择器
标签选择器
标签层级选择器
class层级选择器
id层级选择器
id组合选择器
class组合选择器
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id选择器通过井号来定位*/
#i1{height: 100px;
width: 100px;
background-color: red;
} /*class选择器通过点来定位*/
.c1{height: 100px;
width: 100px;
background-color: black;
} /*标签选择器：当前html页面下的所有div都会受到影响*/
div{
height: 100px;
width: 100px;
background-color: pink;
} /*标签层级选择器，div标签下的所有span标签颜色改变*/
div span{
background-color: blue;
} /*class层级选择器*/
.c2 span{
background-color: green;
} /*id层级选择器*/
#i2 span{
background-color: yellow;
} /*id组合选择器，i3、i4、i5公用一套css样式*/
#i3,#i4,#i5{
height: 100px;
width: 100px;
background-color: orange;
} /*class组合选择器，c3、c4、c5公用一套css样式*/
.c3,.c4,.c5{
height: 100px;
width: 100px;
background-color: chocolate;
} /*属性选择器，通过name属性定位。对选择到的标签 在通过属性进行筛选 可以和层级选择器连用*/
div[name='dsx']{
background-color: rebeccapurple;
} </style>
</head>
<body>
<!--id选择器,一个html页面中不可以存在相同的id，以“#”来定位-->
<div id="i1"></div> <!--class选择器，以“.”来定位-->
<div class="c1"></div> <!--标签选择器：当前html页面下的所有div都会受到影响-->
<div>标签选择器</div> <!--标签层级选择器-->
<div>
<span>大师兄</span>
</div> <!--class层级选择器-->
<div class="c2">
<span>大师兄</span>
</div> <!--id层级选择器-->
<div id="i2">
<span>大师兄</span>
如果行内标签没有内容，不可以对它进行任何的css装饰
</div> <!--id组合选择器-->
<div id="i3">aaa</div><br>
<div id="i4">bbb</div><br>
<div id="i5">ccc</div> <!--class组合选择器-->
<div class="c3">aaa</div><br>
<div class="c4">bbb</div><br>
<div class="c5">ccc</div> <!--属性选择器-->
<div name="dsx">大师兄</div>
</body>
</html>
二、引入css样式的三种方式
1、在head标签当中写一个style标签，在style标签里面可以进行css样式的编写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 100px;
width: 100px;
border: 1px red solid;
text-align: center;
line-height: 100px
}
</style>
</head>
<body> <div class="c1">c1</div> </body>
</html>
2、在标签中直接增加style属性，在style属性当中增加增加css样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1" style="height: 100px;width: 100px;border: 1px red solid;font-size: xx-large;font-weight: bolder;">c1</div> <!--class选择器，通过色差使文字不显示-->
<div class="c2" style="height: 100px;width: 100px;border: 1px red solid;color: white">双鱼座</div>
<!--color: white：控制文字颜色-->
</body>
</html>
3、通过link标签引入写好的css样式表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="black.css">
<link rel="stylesheet" href="green.css">
</head>
<body>
<div class="c1">c1</div>
</body>
</html>
文件black.css中的内容
.c1{
height: 100px;
width: 100px;
background-color: black;
}
文件green.css中的内容
.c1{
height: 100px;
width: 100px;
background-color: green;
}
三、引入css的优先级
标签中style优先级最高，其次在代码中就近找，也就是从下往上找
<!--标签中style优先级最高，其次在代码中就近找，也就是从下往上找-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="black.css">
<style>
.c1{
height: 100px;
width: 100px;
background-color: pink;
}
</style>
<link rel="stylesheet" href="green.css">
</head>
<body>
<!--以标签为基准，由下到上依次查找-->
<div class="c1" style="height: 100px;width: 100px;background-color: blue"></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>
<link rel="stylesheet" href="black.css">
<style>
.c1{
height: 100px;
width: 100px;
border: 1px red solid;
text-align: center;
line-height: 100px
}
/*鼠标悬浮到框内则展示背景色和文字*/
.c2:hover{
background-color: red;
color: black;
}
</style>
<link rel="stylesheet" href="green.css">
</head>
<body style="margin: 0 auto">
<!--style="margin: 0 auto":body标签中加上这项，将外边距设为0--> <div class="c1">c1</div> <div style="height: 100px;width: 100px;border: 1px red solid;font-size: xx-large;font-weight: bolder;">大师兄</div>
<!--height: 100px：边框高度-->
<!--width: 100px：边框宽度-->
<!--border: 1px red solid：1像素 红色边框 实线-->
<!--font-size:larger：大字体-->
<!--font-weight: bolder：字体加粗--> <div style="height: 100px;width: 100px;border: 1px red solid;text-align: center;line-height: 100px;">双鱼座</div>
<!--text-align: center：水平居中-->
<!--line-height: 100px：这个值与边框的height属性的值一样代表垂直居中--> <!-- float 浮动 块级标签浮动后 相当于分层 都像左浮动 块级标签会便在一行 如果超过宽度超过100则会换行-->
<div style="height: 48px;width: 100px;border: 1px red solid;float: left">双鱼座</div>
<div style="height: 48px;width: 100px;border: 1px black solid;float: left">大师兄</div>
<!--float: left：两个div都向左飘，相当于并排在一起了--> <!--块级标签转换为行内标签-->
<div style="height: 100px;width: 100px;background-color: red;display: inline">aa</div>
<!--display: inline：把块级标签变为了行内标签，但行内标签不能使用宽、高、内边距、外边距等特性--> <!--块级标签转换为行内标签-->
<div style="height: 100px;width: 100px;background-color: red;display: inline-block">aa</div>
<!--display: inline-block：把块级标签变为了行内标签，又能使用宽、高、内边距、外边距等特性--> <!--行内标签转换成块级标签-->
<span style="height: 100px;width: 100px;background-color: red;display: inline-block">bb</span>
<!--display: inline-block：使用这个以后块级标签也不占整行--> <!--外边距-->
<div style="height: 100px;width: 100%;border: 1px red solid;">
<div style="height: 40px;width: 100%;background-color: red;margin-top: 30px"></div>
<!--margin-top: 30px:外边距-->
</div>
<!--height:只能是数字px-->
<!--width：可以写百分比--> <!--内边距-->
<div style="height: 100px;width: 100%;border: 1px red solid;">
<div style="height: 40px;width: 100%;background-color: blue;padding-top: 30px"></div>
<!--padding-top: 30px：内边距-->
</div> <!--鼠标悬浮的小手-->
<input type="button" value="提交" style="cursor: pointer">
<!--style="cursor: pointer"：点击按钮时箭头变成小手--> <!--class选择器，通过色差使文字不显示-->
<div class="c2" style="height: 100px;width: 100px;border: 1px red solid;color: white">双鱼座</div>
<!--color: white：控制文字颜色--> <!--position分层-->
<div style=";background-color: greenyellow;position: fixed;top: 0;left: 0;right: 0;height: 48px"></div>
<!--position: fixed：固定在窗口某个位置不会动-->
<div style="height: 10000px;width: 100%;border: 1px red solid;margin-top: 48px">双鱼座</div> <!--position组合定位-->
<!--position: relative与position: absolute连用-->
<div style="height: 100px;width: 100px;border: 1px red solid;position: relative">
<div style="height: 20px;width: 20px;background-color: red;position: absolute;bottom: 0;right: 0"></div>
<!--bottom: 0;right: 0：右下角-->
<div style="height: 20px;width: 20px;background-color: blue;position: absolute;bottom: 0;left: 0"></div>
<!--bottom: 0;left: 0：左下角-->
<div style="height: 20px;width: 20px;background-color: pink;position: absolute;top: 0;right: 0"></div>
<!--top: 0;right: 0：右上角-->
<div style="height: 20px;width: 20px;background-color: green;position: absolute;top: 0;left: 0"></div>
<!--top: 0;left: 0：左上角-->
</div> <!--position分层排序-->
<div style="height: 200px;width: 200px;border: 1px red solid;position: relative">
<div style="height: 200px;width: 200px;background-color: red;position: absolute;z-index:999"></div>
<!--z-index:999：最高层-->
<div style="height: 200px;width: 200px;background-color: blue;position: absolute;z-index:888"></div>
<!--z-index的值小于等于888，显示为蓝色-->
</div> <!--overflow-->
<div style="height: 100px;width: 100px;border: 2px red solid;overflow: hidden">
<!--overflow: hidden:超过div的范围则隐藏掉-->
<img src="http://ui.imdsx.cn/static/image/dsx.jpg">
</div> <div style="height: 800px;width: 800px;border: 2px red solid;overflow: scroll">
<!--overflow: scroll:超过div的范围则加滚动条-->
<!--overflow: scroll:如果div范围大于图片也会加滚动条-->
<img src="http://ui.imdsx.cn/static/image/dsx.jpg">
</div> <div style="height: 800px;width: 800px;border: 2px red solid;overflow: auto">
<!--overflow: auto:超过div的范围则加滚动条-->
<!--overflow: scroll:如果div范围大于图片不会加滚动条-->
<img src="http://ui.imdsx.cn/static/image/dsx.jpg">
</div> <!--background-->
<div style="height: 500px;width: 500px;border: 2px red solid;background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');background-repeat: no-repeat"></div>
<!--background-image: url:div大小大于图片大小，会出现堆叠现象-->
<!--background-repeat: no-repeat：div大小大于图片大小也不会出现堆叠现象--> <div style="height: 500px;width: 500px;border: 2px red solid;background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');background-repeat: repeat-x"></div>
<!--background-repeat: repeat-x:横向堆叠--> <div style="height: 500px;width: 500px;border: 2px red solid;background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');background-repeat: repeat-y"></div>
<!--background-repeat: repeat-x:纵向堆叠--> <div style="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: 0 0"></div>
<!--background-position: 0 0：第一个值改变可以左右移动图片（x轴），第二个值上下移动图片（y轴）-->
</body>
</html>
HTML学习之==>CSS的更多相关文章
- jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
今天学习jQuery,看到nth-child(even)用法,特意找了下这个选择器的用法,在CSS3标准中,用法很强大. 对此,我把CSS3标准中nth-child()用法大致介绍下: CSS3伪类选 ...
- 如何从零开始学习DIV+CSS
CSS是样式,DIV是层.DIV+CSS是网站标准(web标准),通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别.因为XHTML网站设计标准中,不再使用表格定位技术,而是采用D ...
- 学习完毕-css
最近零零散散学习了css 最后附带链接,里面有css的全部demo.有空的可以练习练习,下一步 --->js -----http://www.w3cschool.cc/css/css-examp ...
- ReactNative学习之css样式使用
前言: 前面学习了html,今天学习一下css的基本使用,看下html与css之间是如何结合来编写前端网页的. CSS 是什么? CSS 是 Cascading Style Sheets(级联样式表) ...
- 2016.01.22 前端学习 HTML/CSS
学习HTML/CSS http://edu.51cto.com/course/course_id-3116.html 明日实践
- 值得学习的CSS知识
这里零度给大家推荐几个值得学习的CSS技巧,能让你编写网页事半功倍!一.清除默认值 通常 padding 的默认值为 0,background-color 的默认值是 transparent.但是在不 ...
- amazeui学习笔记--css（布局相关1）--网格Grid
amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式 <div class=&q ...
- amazeui学习笔记--css（基本样式4）--打印样式Print
amazeui学习笔记--css(基本样式3)--打印样式Print 一.总结 1.打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的 ...
- amazeui学习笔记--css（基本样式3）--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
- amazeui学习笔记--css（基本样式2）--基础设置Base
amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...
随机推荐
- Codeforces1238F. The Maximum Subtree（树形dp）
题目链接:传送门 思路: 题意说用线段的相交作为边,来构造树,所以不存在大于等于3个的线段两两相交,否则会构成环.因而构造出的树中,每个点最多只会与2个度大于1的节点相邻. 不妨把1设为树根,用deg ...
- Codeforces 975 前缀和二分算存活人数 思维离直线速度相同判平行
A /* Huyyt */ #include <bits/stdc++.h> using namespace std; typedef long long ll; ]; ]; map< ...
- Ubuntu16.04下caffe CPU版的详细安装步骤
一.caffe简介 Caffe,是一个兼具表达性.速度和思维模块化的深度学习框架. 由伯克利人工智能研究小组和伯克利视觉和学习中心开发. 虽然其内核是用C++编写的,但Caffe有Python和Mat ...
- ARM汇编 汇编文件后缀.s与.S
有两套汇编的语法: ARM公司的标准ARM汇编语言和GNU对ARM支持的GNU ARM汇编. ARM标准汇编语言即ARM公司的开发工具ADS里用的汇编语言: GNU汇编即在Linux下用GCC编译的汇 ...
- mac安装测试myCat
参考博文https://www.cnblogs.com/chanshuyi/p/head_first_of_mycat.html 1.下载解压mycat的mac版(位置不限) 2.cd进bin文件 ...
- Vue给子组件传值为空
在项目中会遇到的情况.给子组件传值. 子组件页面可以把数据展现出来.可在方法中却获取不到 解决方法: 父组件添加判断,让页面执行完.再把值带过去.
- 【NOIP2012模拟10.25】旅行
题目 给定一个n行m列的字符矩阵,'.'代表空地,'X'代表障碍.移动的规则是:每秒钟以上下左右四个方向之一移动一格,不能进入障碍. 计算:在空地中随机选择起点和终点(可以重合,此时最短耗时为0),从 ...
- hdu 3376 : Matrix Again【MCMF】
题目链接 题意:给定一个n*n的矩阵,找一条路,从左上角到右下角再到左上角,每个点最多经过一次,求路径上的点的权值的最大和. 将矩阵中每个点拆点,点容量为1,费用为点权值的相反数.每个点向自己右侧和下 ...
- 算法复习-a 到 z不完全排列生成
在网上看到这个题,觉得很有意思,也算是一种方法...但是复杂度同样很高,生成全排列本身需要很大复杂度. 题目:现在有 a 到 z 26 个元素, 编写程序打印 a 到 z 中任取 3 个元素的组合(比 ...
- pluginManagement的坑
想用protobuf-maven-plugin插件,用了<pluginManagement/>标签包裹<plugin/>,就引不进来,去掉就可以引进来.需要研究下. <b ...