HTML
// css样式
<style type="text/css">
h1 {
font-size: 12px;
color: #930;
text-align: center;
}
</style>
// html 直接引用了样式
<h1>hello world</h1>
image.png
<html> 中间包裹着<head> 和<body>
<head>标签一般包裹着<meta> 和<title> 或者 <style>
<hx></hx> 标题标签，从1到6
<p></p> 标签是段落的意思。
<span></span> 的作用是为了设置单独的样式
<div> 自定义版块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
h1 {
font-size: 12px;
color: #930;
text-align: center;
}
span {
color: blue;
}
</style>
</head>
<body>
<h1>hello world</h1>
<p>你好，中华人民共和国万岁！ 世界人民大团结万岁！<span>I Love China!!</span></p>
</body>
</html>
但是我把<span>标签换成x一样可以。
<header>头部标签</header>
<footer>底部标签</footer>
<section>定义区段</section>
<aside>定义侧边栏区域</aside>
<br /> 换行 是个空标签
空格
<hr /> 水平分割线
<ul> 无序列表
<li>我的第一个标签</li>
</ul>
<ol> 有序列表
<li>这是一个有序列表</li>
</ol>
图片 链接
图片标签
<img src="图片地址 ，本地或网络图片" title ="标题" alt = "图片下载失败时的提示信息"/>
超链接
<a href="http://www.baidu.com" title="鼠标滑过显示的文字" target="_self 或者——blank">百度一下</a>
target :_self 表示在自身的网页打开链接
_blank 表示新开一个网页打开链接
table表格
用到的再来看
https://www.imooc.com/code/21336
表单标签，与用户交互
<form method = "get/post" action = "输入的数据被传送到的地方">
placeholder : 提示信息 ，相当于hint
<form method="get" action="将要发送的地方">
<!-- <input type="text" 输入文本框 -->
名字 <input type="text" name="userName" placeholder="请输入用户名"/>
<br/>
<!-- <input type="password" 输入密码-->
密码 <input type="password" name="pass" placeholder="请输入密码"/>
<br/>
<!-- <type ="number" 输入数字，还有加减符>-->
<input type="number" placeholder="数字输入框"/>
<br/>
<!-- type = url 输入网址，必须要以 http:// 或者 https:// 开头。否则报错-->
<input type="url" placeholder="网址输入框"/>
<br/>
<!-- type = email 邮箱地址-->
<input type="email" placeholder="邮箱输入框"/>
<br/>
<!-- <textarea rows = "10" cols = "10"> 创建文本域-->
<textarea rows="10" cols="10">输入您的宝贵意见</textarea>
<br/>
</form>
<label> 标签作用是当点击label标签是，就会吧焦点转到<label>关联的控件上。
<label for ="控件id名称'/> 需要绑定的控件上指定一个 id ；
选择框 单选框 和 复选框
<form method="post" action="save.php">
<label>你喜欢旅游吗？请选择</label>
<br/>
<label>喜欢</label>
<input type="radio" name="ly" value="喜欢"/>
<label>不喜欢</label>
<input type="radio" name="ly" value="不喜欢"/>
<label>无所谓</label>
<input type="radio" name="ly" value="无所谓"/>
<br/>
<br/>
你对那些运动感兴趣，请选择？<br/>
<input type="checkbox" value="跑步" name="sport"/> 跑步
<input type="checkbox" value="打球" name="sport"/> 打球
<input type="checkbox" value="登山" name="sport"/> 登山
<input type="checkbox" value="健美" name="sport"/> 健美
</form>
checked="checked" 默认选中
标签中的 name =“”值时要一样的
select 、option 标签创建下拉菜单
<form>
<select>
<option value="读书">读书</option>
<option value="运动">运动</option>
<option value="音乐">音乐</option>
<option value="购物" selected="selected">购物</option>
</select>
<input type="submit" value="提交"/>
<!-- 点击重置按钮，其他的选项真的会重置， amazing-->
<input type="reset" value="重置"/>
</form>
CSS
内联式 嵌入式 和外部式。
内联式
<p> 你好，我是来自中国的中国人，<span style="color:blue">我热爱中国</span>，中户人民共和国万岁，世界人民大团结万岁！</p>
嵌入式
格式如下，一般都写在<head>标签里
<head>
<title>标题</title>
<style type="text/css">
span {
color: blue;
}
</style>
</head>
外部式
新建一个 xx.css文件
span{
color:red;
font-size:20px;
}
在html文件中引入外部css文件，一般都在 <head>标签中
<link href=" ******.css" rel="stylesheet" type="text/css">
固定格式，不能变。
优先级顺序 就近原则。
类选择器
自定义名称
<head>
<meta charset="UTF-8">
<title>CSS样式</title>
<style type="text/css">
.xiaoming {
font-size: 12px;
color: red;
}
.china {
font-size: 30px;
color: blue;
}
</style>
</head>
<body>
<p>你好，我叫小明，<span class="xiaoming">我来自重庆大山</span>，
我热爱中国，<span class="china">中华人民共和国万岁</span>，世界人民大团结万岁</p>
</body>
</html>
id选择器
设置id ， 样式的 { } 前 小圆点 换成 #。
类选择器和id选择器的区别
相同点：可以应用于人和元素。
不同点：id选择器只可以用一次
可以用类选择器列表为一个元素同时设置多个样式。id就不行
子选择器
用大鱼号，用于选择指定标签元素的第一代子元素。
<head>
<meta charset="UTF-8">
<title>子选择器</title>
<style type="text/css">
.first>span {
border:1px solid red;
}
</style>
</head>
<body>
<p class="first">三年级时，<span>我还是一个<span>胆小如鼠</span>的小女孩</span></p>
</body>
包含选择器
.first span{
} 区别于子选择器， > 替换为 空格，作用于所有字标签。
通用选择器
*{ } 作用于所有标签 .
伪类选择器
a:hover{
} 就是用在 <a>超链接标签上的样式， 可以设置为鼠标滑过时的超链接的样式。
分组选择器
如果多个标签元素设置同一个样式。可以使用 ，分开
.first , #second{ ***** }
CSS3的集成，优先级和重要性
CSS的某些样式可以继承
先择期优先级
优先级顺序： 内联样式 > id选择器 >类选择器 > 标签选择器 >通配符选择器
权值计算
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
选择器最高级!important;
要放在 属性后面 ； 的前面
CSS字体样式
p{
font-family:"宋体"; // 设置字体
font-size：12px; //设置字体大小
font-weight: bold; //设置粗体
font-style: normal/italic(倾斜)/oblique(强制字体倾斜)；
color:#red; // 设置字体颜色 (有三种方式)
}
文本装饰
text-decoration 添加文本修饰
1、text-decoration可以设置添加到文本的修饰。
2、text-decoration默认值为none, 定义标准的文本。
3、text-decoration的值为underline为定义文本下的一条线。
4、text-decoration的值为overline为定义文本上的一条线。
5、text-decoration的值为line-through为定义穿过文本下的一条线，一般用于商品折扣价。
text-indent为文本添加首航缩进
<style type="text/css">
p{text-indent:2em； //2em的意思就是文字的2倍}
</style>
文字设置行间间距
<style type="text/css">
p{ line-height:1.5em;}
</style>
改变字符间的空白
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS样式</title>
<style type="text/css">
/*设置文字间隔或者字母间隔*/
h1 {
letter-spacing: 50px;
}
/* 单词间距设置*/
h2 {
word-spacing: 30px;
}
</style>
</head>
<body>
<h1>hello world！你好！</h1>
<h2>it's not easy being a teenager</h2>
</body>
</html>
image.png
对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS样式</title>
<style type="text/css">
p {
text-align: center; /* center/left /right 三种对齐方式*/
}
</style>
</head>
<body>
<h1>hello world！你好！</h1>
<p>你说我比大笨钟还笨要怎么比</p>
</body>
</html>
长度值
px 像素
em 本元素给定字体的font-size值，如果元素的 font-size =14px, 那么 1em = 14px; 如果fong-size的值单位为em时，就是相对于父元素的font-size为基础。
百分比
p{
font-size:12px; line-height:130%;
}
CSS盒模型
块状元素 ， 内联元素 ， 内联块状元素
块级元素
display:block;
块级元素特点：
1，每个块级元素都从新的一行开始，并且后面的元素也另起一行。
2，元素的高度、宽度、行以及顶部底边距都可设置。
3，元素宽度
内联元素
display:inline;
特点：
1，和其他元素都在一行上
2，元素的高度，宽度以及顶部和底部边距不可设置
3，元素的宽度就是它包含的文字或图片的宽度，不可以改变
内联块状元素
display: inline-block;
特点：
1，和其他元素都在一行上
2，元素的高度 ，宽度行高以及顶部和底部编剧都可设置。
边框 border
border-width:2px;
border-style:solod;
border-color:red;
border-style（边框样式）常见的有
dashed(虚线) | dotted(点线) | solid（实线）
boder-color(边跨颜色) 十六进制颜色 #ccc
border-width (边框宽度) 可以设置为
thin | medium | thick 常用的还是像素 px ;
border-bottom : 1px dottced #ccc; // 仅设置下边框
border-radius:20px 10px 15px 30px; // 设置圆角
也可以单独设置左上 右上 右下 左下 顺时针的顺序
padding 类似
margin也是顺时针 上右下左
CSS布局模型
网页布局的基本模型，布局模型是建立在盒模型基础之上，包括三种基本布局模型
1, 流动模型(Flow)
2, 浮动模型(Float)
3, 层模型(Layer)
一般默认的都是流动模型
块状元素会在包含元素内自伤而下按顺序垂直延伸分布，默认宽度都是100%
在流动模型下，内联元素都是从左向右分布显示
浮动模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动模型</title>
<style type="text/css">
div{
border: 1px red solid;
margin: 10px;
/* 浮动模型，可以让块状元素并排显示*/
float: left;
}
</style>
</head>
<body>
<div>我是一个元素</div>
<div>我是第二个元素</div>
</body>
</html>
层模型
三种形式
1, 绝对定位 position: absolute
2, 相对定位 position: relative
3, 固定定位 position: fixed
绝对定位 position:absolute
相对最接近的父布局进行定位， 如果没有父布局那就是相对于窗口了
相对定位 position :relative
相对于以前的位置移动 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Layer层模型</title>
<style type="text/css">
/**
相对定位
position: relative;
left: 100px;
top: 50px;
就是说 修饰 div的元素 相对于他的父布局移动了
原来的元素还在之前的位置没有一点点改变
*/
#div1 {
width: 200px;
height: 200px;
border: 2px solid red;
position: relative;
left: 100px;
top: 50px;
}
</style>
</head>
<body>
<div id="div1"></div>
<span>偏移前的位置还保留不动，覆盖不了前面的的div没有偏移前的位置</span>
</body>
</html>
固定定位 position:fixed；
完全相对于浏览器窗口定位
Relative与Absolute组合使用 绝对定位和相对定位的结合使用
参照定位的元素必须是相对元素的前辈元素
<div id="#box1">
<div id = "#box2"></div>
</div>
参照元素必须有 position: relative； #box1
定位元素必须有 position:absolute； #box2
box2中添加 top left 这些属性来定位。
满足这些条件以后, box2就可以相对于box1定位了
弹性盒模型
flex属性
- 设置display:flex 属性可以把块级元素在一排显示
- flex需要添加在父元素上。改变子元素的排列顺序
- 默认为从左往右以此排列，和父元素左边没有间隙
横轴 justify-content
主轴上的对齐方式
justify-content: flex-start(左对齐) |
flex-end（右对齐） |
cneter（居中） |
space-between（两端对齐，项目之间间隔相等） |
space-around（每个项目间隔相等，项目之间的间隔比项目和边框的间隔大一倍）
竖轴 align-items
项目在交叉轴上的对齐方式
都是竖向
align-items：flex-start(交叉轴起点对齐)
flex-end（交叉轴终点对齐）
flex-center(交叉轴的中点对齐)
baseline(项目第一行文字的极限对齐)
strtch(默认值) 如果没设置高度，将占满整个容器的高度。
子元素设置flex占比
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex占比</title>
<style type="text/css">
.box {
height: 300px;
background: blue;
display: flex;
}
.box div {
width: 200px;
height: 200px;
}
.box1 {
background: red;
}
.box2 {
background: orange;
}
.box3 {
background: green;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">flex:1</div>
<div class="box2">flex:3</div>
<div class="box3">flex:2</div>
</div>
</body>
</html>
css样式设置技巧
水平居中设置 - 行内元素
通过给父元素设置属性
text-align:center;
水平居中设置 - 定宽块状元素
需要满足两个条件
width ：200px （定宽）
margin : 20px auto ;(左右margin = auto)
盒子水平垂直居中(已经确定宽高)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平居中</title>
<!-- 水平垂直居中显示 -->
<style type="text/css">
/**
让子布局相对于父布局 绝对定位
*/
.box {
border: red 1px solid;
width: 100%;
height: 500px;
position: relative;
}
/**
子布局 top : 50% left 50%
margin-top : -(1/2 高度)
margin-left: -(1/2 宽度）
*/
.box1 {
border: green 1px solid;
width: 200px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -100px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
盒子水平垂直居中(不确定宽高)
用到 tranform
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>宽高不定实现盒子水平垂直居中</title>
<style type="text/css">
.box {
border: 1px solid #00ee00;
height: 300px;
position: relative;
}
.box1 {
border: 1px solid red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网
</div>
</div>
</body>
</html>
- 利用父元素设置相对定位，子元素绝对定位，那么子元素就是相对于父元素对位的特性
- 子元素设置上和 左 偏移 50%
- 然后 transform: translate(-50%,-50%)给上和左都位移50%距离，就达到效果了。
网友评论