前端开发 - 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=” ...
随机推荐
- Makefile学习之路5——通过函数增强功能
通过函数能显著增强Makefile的功能.对于simple项目的Makefile,尽管使用了模式规则,但还是有一件比较麻烦的事情,就是要在Makefile中指明每一个项目源文件.下面介绍几个后期会使用 ...
- echarts报表
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...
- lua字符串对齐函数
最近要用到字符串对齐,开始只是一部分字符串,就直接加空格了,后来发现有很多, 于是写了个字符串对齐的函数. --功能:分割字符串 --参数:带分割字符串,分隔符 --返回:字符串表 function ...
- Android基础总结（十）ContentProvider
内容提供者(掌握) 应用的数据库是不允许其他应用访问的 内容提供者的作用就是让别的应用访问到你的私有数据 自定义内容提供者,继承ContentProvider类,重写增删改查方法,在方法中写增删改查数 ...
- MongoDB-Elasticsearch 实时数据导入
时间 2017-09-18 栏目 MongoDB 原文 http://blog.csdn.net/liangxw1/article/details/78019356 5 ways to sync ...
- 快速开发 jQuery 插件的 10 大技巧(转)
1. 把你的代码全部放在闭包里面 这是我用的最多的一条.但是有时候在闭包外面的方法会不能调用.不过你的插件的代码只为你自己的插件服务,所以不存在这个问题,你可以把所有的代码都放在闭包里面.而方法可能应 ...
- CI -- $this->load->library()详解
我第一次加载失败,原来是文件名和类名不同的原因,先总结关于CI加载你自己的类文件注意事项: 1.第三方加载文件应放在application/libraries文件下 2.文件名和类名应该相同,并且首字 ...
- typecho篇
百度百科的介绍: Typecho是由type和echo两个词合成的,来自于开发团队的头脑风暴. Typecho基于PHP5开发,支持多种数据库,是一款内核强健﹑扩展 方便﹑体验友好﹑运行流畅的轻量级开 ...
- HMCharacteristicType 承接homekit 外包开发 微信 ELink9988
承接homekit 开发 微信 ELink9988 让HMCharacteristicTypePowerState:String配件的电源状态.该值是一个布尔值.让HMCharacteristicTy ...
- hdu 1147:Pick-up sticks（基本题，判断两线段相交）
Pick-up sticks Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)To ...