前端开发 - CSS - 上
CSS:
1.css的引入方式
2.基础选择器
3.高级选择器
4.选择器的优先级
5.伪类选择器
6.字体样式
7.文本样式
8.背景
9.盒模型border
10.margin
11.padding
1.css的引入方式
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>css的引入方式</title> <!--内链式-->
<style type="text/css">
h2{
font-size: 30px;
color: red;
}
</style> <style type="text/css">
/* 外链式：导入式 实际用的少
使用import是 先加载html 在加载css
import 是css2.1特有的，对于不兼容css2.1的浏览器是无效的eg:IE5以下
*/
@import url('./css/index.css'); </style> <!--外链式：链接式
使用link是html css同时加载的！！
link 是XHTML
-->
<link rel="stylesheet" type="text/css" href="./css/index.css"> </head>
<body> <div>
<!--内嵌式
优先级：内嵌式 > 内链式； 一般不写内嵌式，以后不好维护！
-->
<h1 style="font-size: 10px;color: yellow">我是h1路飞学城</h1>
<h2>我是h2路飞学城</h2>
</div> </body>
</html>
2.基础选择器
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>基础选择器</title> <style type="text/css">
/*通配符选择器*/
*{
padding: 0;
margin: 0;
color: #868686;
}
/*id选择器*/ /* 父内容一般不设 高度 子内容填充*/
#container{
width: 968px;
background-color: antiquewhite;
margin: 0 auto; /*内容居中显示*/
}
/* 标签选择器*/
h1{
color: rgba(158,232,149,0.73)
}
/*类选择器*/
.content{
width: 968px;
background-color: red;
}
img{
width: 968px;
}
/*子代选择器*/
ul>li{
color: aqua;
}
/*后代选择器*/
ul a{
color: green;
}
</style> </head>
<body>
<!-- 上中下 布局 -->
<div id="container">
<div class="header">
<h1>路飞学城</h1>
</div> <div class="content">
<h3>我是内容</h3>
<img src="./images/homesmall1.png" alt="图片1">
</div> <div class="header">
<ul>
<li>1 <a href="javascript:">哈哈</a></li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
</body>
</html>
3.高级选择器
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>高级选择器</title> <style type="text/css">
/*群组选择器*/
.title,.content,.footer{
width: 968px;
/*height: 300px;*/
margin: 0 auto;
background-color: beige;
border: 1px solid red;
}
/*交集选择器*/
p.p1{
color: green;
}
p#title1{
font-size: 30px;
color: red;
}
/* 毗邻标签 紧跟着h3标题的标签*/
h3+p{
color: aqua;
}
/*兄弟选择器*/
h3~p{
color: rgba(120,46,232,0.73)
}
/*属性选择器
找到所有class=baidu的选择器
*/
[class='baidu']{
color: green;
}
/*找到所有class开头是btn 的选择器*/
[class^='btn']{
font-size: 20px;
color: yellow;
}
/*找到以...结尾的选择器*/
[class$='ault']{
font-size: 40px;
color: red;
} </style> </head>
<body>
<div class="title">
<p class="p1" id="title1">我是一个段落</p>
</div> <div class="content">
<h3>我是三级标题</h3>
<a href="javascript:">百度一下</a>
<p>我是另一个段落</p>
<h3>我是三级标题</h3>
<p>我是另一个段落</p>
<h3>我是三级标题</h3>
<p>我是另一个段落</p>
<p>我是另一个段落</p>
<p>我是另一个段落</p>
</div> <div class="footer">
<a href="https://www.baidu.com" class="baidu">百度</a>
<a href="https://www.baidu.com" class="btn-default">百度一下</a>
<a href="https://www.baidu.com" class="baidu">百度</a>
<a href="https://www.baidu.com" class="btn-index">百度二下</a> </div> <!--
总结：
基础选择器：
1.标签选择器 div
2.类选择器 .div1
3.id选择器 #box
4.通配符选择器 *
高级选择器：
1.群组选择器 中间用,
.title,.content,.footer{}
2.交集选择器 选择器之间不能有空格，第一个标签必须是标签选择器，第二个标签可以是id或者类选择器
p.p1{} p#title1{}
3.后代选择器 选择器之间用 空格
ul a{}
4.子代选择器 选择器之间用 >
ul>li{}
5.毗邻选择器 选择器之间用 + 紧跟着h3标题的标签
h3+p{}
6.兄弟选择器 选择器之间用~
h3~p{}
7.属性选择器
[class='baidu']{}
[class^='btn']{}
[class$='ault']{}
css样式优先级：
行内样式 > 内部样式表 > 外部样式表
ID选择器 > 类选择器 > 标签选择器
-->
</body>
</html>
4.选择器的优先级
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>优先级</title> <style type="text/css">
#div1{
background-color: yellow;
}
.box{
background-color: green;
}
div{
width: 200px;
height: 200px;
background-color: red;
} </style>
</head>
<body>
<!-- 选择器的优先级 id > 类 > 标签-->
<div id="div1" class="box">哈哈</div> </body>
</html>
5.伪类选择器
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title> <style type="text/css">
/*超链接未被访问时的状态*/
a:link{
background-color: yellow;
}
/*鼠标单击时超链接的状态*/
a:visited{
color: green;
}
/*鼠标悬停时超链接的状态*/
a:hover{
font-size: 30px;
color: aqua;
}
/*鼠标点击不松手超链接的状态*/
a:active{
color: blue;
}
/*获取焦点时的样式*/
input:focus{
background-color: red;
}
/*
总结：
爱恨情仇原则：love / hate
*/ /*伪元素选择器*/
p:first-letter{
font-size: 30px;
}
p:before{
content: '哈哈';
color: red;
}
p:after{
content: "$$";
color: green;
} </style> </head>
<body>
<ul>
<li><a href="#">百度一下</a></li>
<li><a href="#">hao123</a></li>
<li><a href="#">博客</a></li>
</ul> <form action="">
<input type="text" name="">
</form> <p>来呀，你好啊！</p>
</body>
</html>
6.字体样式
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>字体样式</title> <!--内链式 -->
<style type="text/css">
p{
/*设置字体大小*/
font-size: 30px; /*推荐设置斜体的时候使用oblique*/
/*font-style: italic;*/
font-style: oblique; /*设置字体的粗细*/
font-weight: bolder; /*设置字体的类型*/
font-family:"微软雅黑"; /*设置字体的颜色*/
color: red;
}
</style> </head>
<body>
<!--
默认字体大小是 16px = 1em
0.75em = 12px
-->
<p>这里是个p!!</p> </body>
</html>
7.文本样式
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>文本样式</title> <style type="text/css">
.box1{
width: 500px;
height: 200px;
background-color: red; color: rgba(85,26,139,0.73); /*上下删除线 overline line-through */
text-decoration: underline; /*设置鼠标的形状*/
cursor: pointer; /*设置首行缩进*/
text-indent: 20px; font-size: 20px; /*left right center justify 两端对齐只针对英文 */
text-align:justify; /*设置阴影 左右 上下 0-1 color */
text-shadow:0px 0px 1px #fff; /*行高
规律： 当行高=盒子的高度时，文本会垂直居中
*/
line-height: 200px;
text-align: center; } </style> </head>
<body> <div class="box1">
my name is alice
</div> <a href="">天空飘个五个字</a> </body>
</html>
8.背景
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>背景</title> <style type="text/css">
#img{
width: 990px;
height: 980px; /*设置背景颜色*/
/*background-color: yellowgreen;*/ /*background-image: url("./images/homesmall1.png");*/ /*!* repeat-x repeat-y no-repeat *!*/
/*background-repeat: no-repeat;*/ /*background-position: 10px 20px;*/ /*简写*/
/*background:url("./images/homesmall1.png") no-repeat 20px 30px yellowgreen;*/ background: red;
padding-top:10px;
border: 5px solid blue; }
</style> </head>
<body> <div id="img"> </div> </body>
</html>
9.盒模型border
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>border</title>
<style type="text/css">
.wrap{
width: 200px;
height: 200px;
background-color: #000000; /*
border-top-width: 5px;
border-bottom-width: 10px;
border-left-width: 15px;
border-right-width: 20px; border-top-color: red;
border-bottom-color: yellowgreen;
border-left-color: yellow;
border-right-color: blue; border-top-style: solid;
border-bottom-style: dashed;
border-left-style: dotted;
border-right-style: double;
*/ /* 四个值 上 右 下 左 */
/*
border-style: dotted dashed double solid;
border-width: 5px 10px 15px 20px;
border-color: blue red yellow slateblue;
*/ /* 三个值 上 左右 下*/
/*
border-style: dotted double solid;
border-width: 5px 10px 20px;
border-color: blue yellow slateblue;
*/ /* 两个值 上下 左右 */
/*
border-style: dotted solid;
border-width: 5px 20px;
border-color: blue yellow;
*/ /* 一个值 上下左右 */
/*
border-style: dotted;
border-width: 20px;
border-color: blue;
*/ /*简写*/
/*border: 10px solid yellow;*/ }
</style> </head>
<body>
<div class="wrap"></div>
</body>
</html>
10.margin
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>margin</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: #ff5776; /*
margin-top: 20px;
margin-left: 40px;
margin-bottom: 20px;
margin-right: 40px;
*/ /* 上 右 下 左*/
/*margin: 20px 30px 40px 50px;*/ /* 上 左右 下*/
/*margin: 20px 30px 40px;*/ /* 上下 左右*/
/*margin: 20px 40px;*/ /*margin-bottom: 50px;*/ /* margin: 0 auto;使盒子元素水平居中 */
margin: 0 auto; }
/*
总结：
垂直方向的特殊性；水平方向没有这种特性；
当两个垂直外边距相遇时，会形成一个外边距，称为 外边距合并，已大的为基准！！
注意：父子级盒子 嵌套 设置外边距 会形成外边距合并，影响页面布局，
解决办法：给父元素添加 border
解释：
所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之（以最大的为基准）。
毗邻的定义为：
同级或者嵌套的盒元素，并且他们之间没有非空内容，padding或者border分割。
解决办法：（子债父还）
1.父级或子元素使用浮动或者绝对定位absolute,浮动或绝对定位不参与margin的折叠。
2.父级overflow:hidden
3.父级设置padding(破坏非空白的折叠条件)
4.父级设置border
*/
.box2{
width: 200px;
height: 200px;
background-color: yellow;
margin-top: 100px;
border: 1px solid chartreuse;
/*padding: 1px;*/
/*overflow: hidden;*/
}
.child{
width: 100px;
height: 100px;
background-color: #868686;
margin-top: 150px;
} span{
background-color: #ff5776;
}
.span1{
margin-left: 40px;
}
.span2{
margin-left:20px;
} </style>
</head>
<body>
<div class="box1"></div>
<div class="box2">
<div class="child"></div>
</div> <span class="span1">12345</span>
<span class="span2">54321</span> </body>
</html>
11.padding
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>padding</title>
<style type="text/css">
.box1{
width: 100px;
height: 200px;
background-color: #ff5776; /*
内边距：内容区域到边框的距离
内边距会扩大元素所在的区域
注意：
为元素设置内边距 只能影响自己，不会影响其他的元素；
*/ /*
padding-left: 20px;
padding-top: 30px;
padding-right: 40px;
padding-bottom: 40px;
*/ /*
padding: 10px 20px 30px 40px;
padding: 10px 30px 50px;
padding: 10px 20px;
*/
padding: 10px; }
</style> </head>
<body>
<div class="box1">
12345
</div>
</body>
</html>
前端开发 - CSS - 上的更多相关文章
- 前端开发css实战：使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- 前端开发css禁止选中文本
在我们日常的Java web前端开发的过程中呢,程序员们会遇到各种各样的要求,所以不每天学的东西感觉自己都退步了,都更不上时代的发展了. 每天应对各种需求,每天活在疑问中就是我们程序员的真是写照.但我 ...
- 第十一章 前端开发-css
第十一章 前端开发-css 1.1.0 css介绍 css是指层叠样式表(Cascading Style Sheets),样式定义如何显示html元素,样式通常又会存在于样式表中. css优势: 内容 ...
- 1+x 证书 Web 前端开发 css 专项练习
官方QQ群 1+x 证书 Web 前端开发 css 专项练习 http://blog.zh66.club/index.php/archives/192/
- web前端开发CSS命名规范参考
做为一个web前端工程师,每天接触HTML.css就像吃饭一样,但是作为一名合作.优秀的web前端工程师,对DIV+CSS命名还是有一定的规范的,本文整理了一份web前端开发中DIV+CSS各种命名规 ...
- 前端开发 CSS中你所不知道的伪类与伪元素的区别--摘抄
做过前端开发的人都熟悉伪类与伪元素,而真正能够彻底了解这二者的区别的人并不多.伪类与伪元素确实很容易混淆. 伪元素主要是用来创建一些不存在原有dom结构树种的元素,例如:用::before和::aft ...
- 前端开发CSS清除浮动的方法有哪些？
在前端开发过程中,非IE浏览器下,当容器的高度自动,并且容器内容中有浮动元素(float为left或right),此时如果容器的高度不能自适应内容的高度,从而使得内容溢出破坏整体布局,这种现象叫做浮动 ...
- Web前端开发CSS规范总结
作为Web前端开发必备语言,CSS为大家广为熟知,今天就跟大家分享下CSS规范总结,Web前端的小伙伴们看过来吧! CSS样式的权值(权重) 权值等级的定义 第一等:代表内联样式,如: style=” ...
随机推荐
- （转载） STL中map用法详解
Map是STL的一个关联容器,它提供一对一(其中第一个可以称为关键字,每个关键字只能在map中出现一次,第二个可能称为该关键字的值)的数据处理能力,由于这个特性,它完成有可能在我们处理一对一数据的时候 ...
- IBM MQ 2035 或 2013认证错误的解决方法
第一种方法: ALTER CHL(SYSTEM.BKR.CONFIG) CHLTYPE(SVRCONN) ALTER CHL(SYSTEM.ADMIN.SVRCONN) CHLTYPE(SVRCONN ...
- QTableWidget与QTableView的区别
QTableWidget继承自QTableView.QSqlTableModel能与QTableView绑定,但不能于QTableWidget绑定 QSqlTableModel *model = ne ...
- 重启oracle方法一二三
startup nomount alter database mount alter database open Linux:方法1 用root以ssh登录到linux,打开终端输入以下命令: cd ...
- js学习笔记23----窗口尺寸及窗口事件
窗口尺寸: 可视区的尺寸 document.documentElement.clientWidth document.documentElement.clientHeight 滚动距离 documen ...
- 115个Java面试题和答案（上）
转自:http://www.importnew.com/10980.html 本文我们将要讨论Java面试中的各种不同类型的面试题,它们可以让雇主测试应聘者的Java和通用的面向对象编程的能力.下面的 ...
- doAfterBody()方法是在（ ）接口中定义的。
A．Tag B．IterationTag C．BodyTag D．TagSupport 解答:B
- c#用run32dll打开系统dll(如系统图片查看器,并置最顶层)
[DllImport("user32.dll", EntryPoint = "SetWindowPos",CharSet = CharSet.Auto)] st ...
- linux通过shell脚本修改文件内容
sed -i 's/abc/xxx/g' file abc修改前的字符串xxx是修改后的字符串file是要被修改的文件
- 用公式编辑器编辑n元乘积的方法
在数学中经常会出现很多个元素进行求和或者是乘积的情况,但是在整个数学过程中,不可能将所有的元素都写出来,这样很费时费力同时过程也很赘余,不能很好地理解其中的过程,因此数学中对于这一类的多元相加或者相乘 ...