Title
块级标签
排版标签
p,div,hr
p块的上下有一些空白
hr是一条线
div是没有任何效果的块标签
列表
ol,ul,dl
ul li
type:disc square circle none
ol li
type:a A I 1 i start:2
dl dt dd
表格
table
thead :tr表示行 th表示cell /*可有可无*/
tbody :tr表示行 td表示cell
border边框的线宽 cellpadding和内容的距离 cellspacing和外边框的距离
colspan合并行 rowspan合并列
表单
form action='url'
input
# type : text,password,radio,checkbox,submit,button,reset,hidden,file,date
# name\value
# radio,checkbox : checked
# text,password:readonly 可以提交到后台,但不能修改
# text:placeholder输入框的默认提示语
# disabled 不能修改,也不能提交到后台
button : 如果放在表单内也可以表示提交
select
# 默认单选 size 设置多选multiple name属性
# option value属性 selected表示默认选中
label : 和input for='text/password设置了id',label被点击的时候input框获得焦点
textarea :文本框 rows cols设置大小 name属性
css
css的引入方式
行内样式
内接样式
<style>
div{
color:red;
}
</style>
外接样式(链接式,导入式)
<link href='xxxx.css'>
<style>
@import url('地址')
</style>
几个基础样式
width 宽
height 高
background-color 背景色
color 字体颜色
选择器
基础选择器
标签选择器 : a div p span
类选择器 : .类名
id选择器: #id名
通用选择器: *
高集选择器
后代选择器:div p 表示div标签下的所有的p标签
子代选择器:div>p 表示div下面一层所有的p标签
毗邻选择器:div+p 找div的兄弟标签中的下一个p标签
弟弟选择器:div~p 找div下的所有弟第p标签
属性选择器:div[title] div[title='aaa'] 找到所有含有title属性的div/找到所有title属性='aaa'的div
并集选择器:ul,li 所有,分隔的标签都要找到
交集选择器:div.aa 找所有class='aa'的div标签
伪类选择器:a:active鼠标按下 link连接未访问之前 visited连接访问后
input:focus 输入框获得焦点
hover:鼠标悬浮
伪元素选择器:first-letter第一个字的样式
before(after)值这个标签的前面(后面)加content,给这个content设置样式
今日内容
css选择器优先级
行内>id选择器>类选择器>标签选择器>继承
1000 100 10 1 0
所有的值可以累加但是不进位
优先级如果相同,写在后面的生效
div.a{
background-color: green !important; 提高样式的优先级到最高
}
颜色表示
rgb表示法: rgb :red green blue 光谱三原色 rgb(255,255,255) 白色 rgb(0,0,0) 黑色 16进制的颜色表示法 #000000-#FFFFFF #000 - #FFF 单词表示法: # red green rgba表示法: #a表示的是透明度 0-1,0是完全透明,1是不透明 https://htmlcolorcodes.com/zh/yanse-ming/
字体
p{
font-family: 'Microsoft Yahei','楷体','仿宋';
font-weight: bold;
font-size: 12px;
}
文本
text-align 文字的水平对齐
left 左对齐
center 居中
reght 右对齐
text-decoration 文本装饰
none; 没有下划线
line-through; 中划线
overline; 上划线
underline; 下划线
text-indent 文本缩进
text-indent: 2em; em单位是一个相对单位,相对当前字体大小的像素是1em
line-height 行高,设置行高=容器高度,文字自动垂直居中
line-height: 200px;
color:设置字体颜色
背景图片
background-color: red; 在没有背景图片覆盖的范围显示背景颜色
background-image: url('timg.jpg'); 设置背景图片
height: 400px;
width: 400px;
background-repeat: no-repeat; 设置图片不重复 repeat-x水平重复 repeat-y垂直重复
background-position: right top; 图片的位置 左中右x 上中下y
/*left center right /top center bottom*/
background-attachment: fixed; 在窗口中固定图片的位置
background:red url("timg.jpg") no-repeat left center; 把所有的设置综合写在background中
边框的设置
width: 100px;
height: 100px;
/*border-color: tomato green gray yellow;*/
/*border-width: 1px 3px 5px 7px;*/
/*border-style: solid dotted dashed double;*/
/*一个值:上下左右
四个值:遵循顺时针上右下左
三个值:上 右左 下
两个值:遵循上下 左右
*/
/*border-top-style:solid ;*/ 单独设置顶线的样式(left,bottom,right)
/*border-left-style:solid ;*/ 单独设置左边线的样式
/*border-top-color:red;*/ 单独设置顶线颜色
border:yellow solid 10px; 统一设置边框的颜色 样式 宽度
块和行内的概念\转换
对于行内标签来说不能设置宽和高 有些时候需要行内标签也设置宽和高,需要进行行内-->块,行内->行内块 display的属性值 : block块 inline行内 inline-block行内快 none display: block; 独占一行并且可以设置宽高 display: inline-block; 既可以设置宽高又不会独占一行 行内\块转行内快 display: inline; 表示一个行内元素,不能设置宽高 display: none; 不仅不显示内容,连位置也不占了
盒模型
border : 边框的宽度
padding : 内边距的距离
content : width height
背景包含的部分:padding + conntent
计算一个盒子的总大小: 宽width+2padding+2border 高height+2padding+border
外边距 margin
上下的盒子如果设置bottom和top会导致塌陷,取两个设置的最大值作为外边距
margin: 0 auto;表示左右居中(父盒子宽度,子盒子宽度)
分方向的设置
border-top border-right border-bottom border-left
padding-top padding-right padding-bottom padding-left
margin-top margin-right margin-bottom margin-left
给图形设置圆角
border-radius: 5px;
列表样式
在css中去掉列表的样式
ul,li{
list-style: none;
}
浮动
float:left /right
浮动的元素会脱离标准文档流,原本块级元素就不再独占整行了
并且在原页面中也不占位置了,之后的元素会挤到页面上影响页面的排版
清除浮动 clear:both
伪元素清除法:
.clearfix:after{
content: '';
clear: both;
display: block;
}
<body>
<div class="father clearfix">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="main">
主页的内容
</div>
</body>
overflow
内容多余标签的大小 visible 可见(默认) hidden 超出部分隐藏 scroll 超出显示滚动条
定位
position : relative /absolute /fixed top:10px; right:10px; bottom:10px; left:10px; 相对定位 :相对自己原来的位置移动,移动之后还占据原来的位置 绝对定位 :绝对定位是相对于整个html页面,不会占据原来的位置,层级的提升 如果我们设置了绝对定位的元素 的父元素 没有设置position,那么我们对元素的所有设置都是基于整个页面 如果设置了position,那么子盒子的absolute位置会根据父盒子的位置定位 父相子绝:子元素设置的绝对位置会对应着祖级元素的相对位置 固定定位 :固定是相对于整个窗口的
z-index
用法说明: z-index 值表示谁压着谁，数值大的压盖住数值小的， 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。 从父现象：父亲怂了，儿子再牛逼也没用
opacity
opacity: 0.5;调整d4对应的整个标签的透明度是50%
.d4{
opacity: 0.5;
}
<div class="d4">
你好你好娃哈哈
<img src="timg.jpg" alt="">
</div>