html基础内容样式
head
<meat charset="utf-8" /> 编码格式:让浏览器可以识别中文
<meat name="Author" content="亮亮"> 作者
<meta name="keywords" content="百度,淘宝,亮亮"> 关键字:用户搜索的时候可以通过关键字搜索到该网页
<meta name="description" content="这是一个非常强大的第三网站...> 网站的描述信息
body
h1~h6:标题标签,重要性依次递减,字体默认加粗,一般作为文章的标题使用
<p></p> p标签:段落标签
<br> 换行标签
 ; 牛逼的空格
<hr> 水平线
< <
> >
<q></q> " "
<blockquote></blockquote> 引用别人一段话
<strong></strong> 强调文本为重要文本,字体加粗
<em></em> 强调文本为重要文本,字体倾斜
<sup></sup> 上标
<sub></sub> 下标
<img src="网络路径 本地路径 相对路径"> 一般写相对路径
./ 例如:./girl.jpg 当前目录,可以省略
../ .. /girl.jpg 跳到上级目录
<img alt=" "> 图片加载失败的时候,显示的替换文本
<img title=" "> 鼠标悬浮在元素上时显示的内容
<a href=" " target=" "></a> href:超链接,网页之间的纽带
target=“_blank” 代表在新的网页中打开地址
target=“_seft” 默认值,代表在当前页打开地址
<a href="#">回到顶部</a> 回到网页顶部
<a href="#teacher">讲师</a> 设置锚点, 可以跳到 id 为 teacher的元素
<a href="img.zip">下载图片</a> 下载
<ul><li></li></ul> 无序列表
<ol><li></li></ol> 有序列表
<dl> <dt><dd></dd></dt></dl> 自定义列表
表格
border:边框
cellspacing: 单元格之间的距离
cellpadding: 单元格和内容之间的距离
align: 对齐方式
align="left" 居左对齐
align="right" 居右对齐
align="center" 居中对齐
<caption>花</caption> 标题
<tr> </tr> 表格的行 给tr添加align=“center”他的自代元素都会居中对齐
<th></th> <td></td> 表格的列 th: td的一个变种,字体默认加粗,居中
<td rowspan="2"> rowspan:行的跨度
<td colspan="2" align="center" bgcolor="red">
colspan:列的跨度 bgcolor:背景颜色
<tfoot> </tfoot> 表尾
tfoot:写在tbody上方,并不影响页面中的显示效果,但可以让用户优先看到tfoot中的内容
css样式
<link rel="stylesheet" type="text/css" href="index02.css">
type:类型,表示浏览器解析的方式,如果不定义的话,有些css效果浏览器解释的效果不一样
width:200px; 宽度
height:200px; 高度
background:green; 背景颜色
text-align:center; 对齐方式
color:white; 设置字体颜色
选择器
div>p 子代选择器
div p 后代选择器
ul+p 相邻兄弟选择器 选择和ul相邻的选则器
* 选择所有元素
# id选择器
. class选择器
属性选择器
div[id] 选中具有id属性的
div[class] 选中具有class属性的div
div[class|="home"]选择class为home的div元素,或着选中class为home开头 后面内容用 - 链接的div元素
div[class="a c"] 选中class为ac属性的
div[class~="a"] 选中包含a属性的
div[class^="r"] 选择以属性名开头的元素
div[class$="x"] 选择以属性名结尾的元素
div[class*="i"] 选中属性中包含该值的元素
伪类伪元素选择器
a:link 当元素定义了超链接属性,并且从来没有点击的样式
a:visited 该链接已经被访问过的样式
a:hover 鼠标悬浮在元素上方时的样式
a:active 鼠标按下不松开
div::first-line 第一行的样式
div::first-letter 第一个单词
p::before 前面添加。。
p::after 后面添加
顺序:link-visited-hover-active;
结构伪类选择器
.box>li:nth-child(odd) 选中处于基数位的元素
.box>li:nth-child(even) 选中处于偶数位的元素
.box>li:nth-child(n+3) 可以跟简单的数学公式
.box>li:nth-child(5n) 5的倍数
.box>li:first-child 选取第一个元素
.box>li:last-child 选取最后一个元素
.box>li:nth-last-child(n+2) 选取最后三行的
.wrap>p:nth-of-type(1) nth-of-type用法同nth-child基本一致,只不过nth-of-type会过滤掉其他类型的元素
.wrap>p:nth-last-of-type(n+3) 倒着数
.wrap>p:first-of-type 选中第一个类型为p的元素
.wrap>p:last-of-type 选中最后一个类型为p的元素
其他结构伪类选择器
div:empty 选中元素内容为空的元素
p:only-child 选中该元素父级中只有该元素的元素
:root 选中的html
状态伪类选择器
input:disabled 选中禁用状态下的input
input:enabled 选中可用状态下的input
input:focus 选中聚焦状态下的input
input:checke 针对单选框和多选框 选中状态下的input
其他选择器
.box~p 通用兄弟选择器 选中,box下面的所有匹配的p元素
li>*:not(div) 否定伪类选择器 选中除了div元素之外的其它元素
p:target 目标伪类选择器 通过a标签跳转到该标签时,样式会起作用
选择器的优先级
!important(慎用)>行内样式>ID选择器>class选择器>与元素选择器
盒模型
padding-top:20px 上内填充
padding: 20px 30px 40px 上 左右 下
padding:20px 30px 上下 左右
border-top-width:10px; 上边框宽度
border-top-style:outset 上边框样式()
solid:实线
dashed: 虚线
dotted: 小点
double: 双实线
groove: 3d凹槽
ridge: 3d凸槽
outset: 3d凸边
inset: d凹边
border-top-color:blue; 上边框颜色
box-sizing: border-box; 怪异盒模型 ie下会出现怪异盒模型
border-box:width/height = border+padding +content;
盒子阴影
box-shadow: 10px 10px 0 0 gray;
第一个值:阴影在x方向的偏移量,正值向右偏移,负值向左偏移;
第二个值:阴影在y方向的偏移量,正值向下偏移,负值向左偏移;
第三个值:模糊度;
第四个值:阴影半径;
第五个值:颜色;
disaply
块级(block)元素 常见的块级元素(div, p, h1~h6, ul, li, ol, dl, dt, tr, table, dd)
1. 默认独占一行
2. 不设置宽度的话,默认盛满父级
3. 支持宽高设置,支持所有的css样式设置
内联(inline)元素:
1. 行内元素可以和行内元素并排显示
2. 换行会被解析 (解决方案,将父级元素的font-size设置为0)
3. 不支持宽高设置,不支持margin-top, margin-bottom, padding-top,
padding-bottom设置
4. 宽决定
inline-block
1.可以设置高
2.换行被解析
3.可以同排显示
disaply: inline; 让元素以行内高由内容元素形式展示
disaply: block; 让元素以块级元素形式展示
disaply: inline-block; 让元素同时具有块级元素和行内元素部分特征
margin
第一个margin-top会传递给父级;
解决方案:
1:改用padding
2:给父级添加: border-top
3:给父级添加:overflow:hidden;
行内元素设置上下margin,上下padding无效,宽高也不能设置。有内容决定宽高
文本设置(text)
color: red 给字体设置颜色
text-decoration: line-through;
文本装饰
overline:上划线;
underline: 下划线;
line-through:删除线;
none:不要任何修饰;
text-align: justify;
文本对齐方式
left:左对齐;
center:居中对齐;
right:右对齐;
justify:两端对齐;
text-indent: 32px; 首行缩进
white-space: nowrap;
空白符处理
pre:原样显示
pre-line:合并空白符,但不会合并换行
pre-wrap:换行;
nowrap:不换行;
overflow: hidden; 益处隐藏
text-overflow:ellipsis;
文本溢出
clip:剪切;
ellipsis:省略号;
vertical-align:middle; 垂直方向对齐
vertical-align: bottom; 底部对齐
默认: baseline寄线对齐,
这个值会造成图片下方和元素有一个间隙的问题;
字体设置(font)
font-style: oblique
字体样式
italic:字体中的斜体
oblique:把字体强行拉斜;
font-variant: small-caps; 小写英文变大写
font-weight: bold;
normal:普通;
bold:粗体;
bolder:更粗;
值也可以是100的倍数,范围:100- 900
400:normal
700:bold
font-size: 25px; 字体大小 默认:16px
line-height: 100px; 行高
font-family: " " 字体家族
font: italic small-caps bold 20px/100px(字体大小/行高 必写) "翩翩体-简";
浮动
浮动:
元素脱离文档流,沿着某一个方向流动,
知道碰到父级边界或者同级浮动元素的边界才会停止
浮动元素 margin: auto; 失效
如果浮动元素上方有块级元素,那么浮动元素不会遮盖上方块级元素
浮动元素特点:
1.不设置宽高,有内容撑起宽高
2.会使元素脱离文档流,(文档流:元素在网页中所占的位置)
3.让元素同时具有行内元素和块 元素部分特征
4.会提升元素层级
5.不会遮盖文字
元素的嵌套规则:
1.块级元素可以嵌套大部分的块级元素,可以嵌套行内元素
2.行内元素可以嵌套行内元素,但不能嵌套块级元素
3.p,dt,h1~h6 不能嵌套块级元素
4.同级元素之间一般是行内元素与行内元素并列, 块元素与块元素并列
图片
background-image: url('as.jpg'); 背景图片
background: url("img/bg-tl.png") no-repeat left top,
url("img/bg-tr.png") no-repeat right top,
url("img/bg-bl.png") no-repeat left bottom,
url("img/bg-br.png") no-repeat right bottom;
background-repeat: no-repeat;
背景平铺效果
no-repeat:没有平铺效果;
repeat-x: x方向平铺;
repeat-y: y方向平铺;
repeat: 默认效果,x y方向都平铺
background-position: 20px 20px;
背景图片位置
值可以为:left right, center, top, bottom这几个的组合值,例如: right top是右上角; 也可以
为像素,比如:20px 20px;
background-attachment: scroll;
依附关系
scroll:背景图位置随着网页的滚动儿滚动;
fixed:背景图的位置固定,不随着网页的滚动而发生变化;
(overflow: scroll; position: relative; ) 超出的内容通过滚动查看
background-size:50% 50%
背景大小
cover(覆盖)|px| percent| contait(让图片以最大尺寸在背景中完全显示)|
隐藏元素
display: none; 展示效果:
none:元素消失,不在网页中占据位置
visibility: visible;
hidden:不可见 元素不可见,但是在网页中占据位置;
visible:可见;
ul样式
list-style-type:upper-alpha;
列表样式类型:
none: 没有样式;
disc: 实心圆;
circle:实心圆;
square:实心方块;
decimal-leading-zero:0开头的十进制;
lower-alpha:小写英文字母;
upper-alpha:大写英文字母;
list-style-position: inside;
列表样式位置
inside 在li内部
outside 在li外部
list-style-image: url('ad.jpg'); 样式图片
css样式的单元格
border-spacing: 10px; 边框之间的距离
border-collapse: collapse; 合并边框
empty-cells: hide; 隐藏空单元格
清除浮动
clear: right
celer:
left:清除周围左浮动元素对该元素造成的影响;
right:清楚周围右浮动元素对该元素造成的影响;
both:清除周围左右浮动元素对该元素造成的影响;
绝对定位
position: absolute;
right: 0;
top: 0;
left: 0;
bottom: 0;
margin: auto;
绝对定位:相对于距离自己最近的,
具有定位属性的父辈元素进行定位(注意:
父辈元素的定位属性值不能是默认值static)
相对定位
position: relative;
top:150px;
left: 100px;
right: 100px;
相对定位:
相对于元素本身原来的位置进行定位,
会提高元素的层级,元素本身的特性不发生变化,
一般设置了相对定位,不会对其left,top,right,
bottom的值进行修改;
固定定位
position: fixed;
固定定位:相对于document进行定位(当前窗口),
不会随着页面的滚动而滚动(悬浮框效果);
h5(视频 音频 输入框)
<audio autoplay controls>
<source src="yinyue.mp3"></source>
<source src="yinyue.wav"></source>
<source src="yinyue.ogg"></source>
该浏览器不支持音频播放,请下载最新版本的浏览器wg(歪哥)浏览器
</audio>
<video autoplay controls width="500px">
<source src="shipin.mp4"></source>
<source src="shipin.wav"></source>
<source src="shipin.ogg"></source>
该浏览器不支持视频播放,请下载最新版本的浏览器
</video>
<input type="email" required> 邮箱输入框,提交时会验证输入框中的内容是否正确required :内容必填
<input type="url"> 验证url
<input type="number" step="5"> 数字 step(每次都加5)
<input type="date"> 年月日
<input type="month"> 年月
<input type="week"> 年周
<input type="text" autofocus> autofocus:自动聚焦
<input type="text" disabled> disabled:使不能使用
<input type="submit"> 提交按钮
<header></header> 头部内容
<nav></nav> 导航内容
<footer></footer> 尾部内容
<aside></aside> 侧边栏
<article></article> 有独立内容的部分,比如一个评选区,讨论区等待
media媒体查询
<meat name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
viewport:视窗
width:视窗宽度=设备宽度(css像素)
initial-scale:初始缩放比例
minimum-scale:允许缩放最小倍数
maximum-scale:允许缩放最大倍数
user-scalable:是否允许用户进行缩放 no是不允许 ,yes是允许
像素分为 设备像素(物理像素)和 css像素(设备无关像素)
window. devicePixelRatio = 物理像素/css像素
《html》@media only screen and (min-width: 600px) and (max-width: 800px)
《head》<link rel="stylesheet" href="css/middle.css" media="screen and (min-width:550px) and (max-width:750px)">
percent百分比
width: 50%; 父级宽度的50%
height: 50%; 父级高度的50%
border-radius:100% 100% 100% 100%/50% ; 50% /100% 100% 0 0(上下椭圆的一半)
100% 0 0 100% / 50%;( 左右椭圆的一半)
注意:margin—top,margin-bottom,padding-top,padding-bottom是相对于父级的宽度的百分比;
em和rem
rem是html的font-size的大小
em:当前元素字体大小
响应式布局:
格局不同的页面尺寸,写不同的页面布局(css)
技术:
媒体查询
用百分比代替像素左适配(自适应布局)
用rem,em来设置元素的尺寸
用viewport来适配移动端,对移动端进行优化
渐变
background-image: linear-gradient(to right bottom ,blue ,red ,150px,yellow);
线性渐变:
第一个值:方向;
可以是to right, to left, to top, to bottom,
to right top , to left top, to right bottom,
to left bottom,还可以是角度,单位是 deg
后面的值:颜色 渐变的位置(px|百分比);
background-image: radial-gradient(200px circle at center center,red 20px, orange,yellow);
径向渐变:
半径 形状 at 圆心位置, 颜色 渐变位置,颜色 渐变位置。。。
圆心位置可以是 top, right, bottom, left, center,
也可以是px, 也可以是 percent(百分比)
background-image:radial-gradient(farthest-corner ellipse at 100px 100px ,red,yellow,blue);
形状如果是椭圆的话,半径不能写成像素
farthest-side:圆心到最远的边;
clothest-side:圆心到最近的边;
farthest-corner:圆心到最远的角;
clothest-corner:圆心到最近的角;
椭圆渐变
background-image:radial-gradient(farthest-corner ellipse at 100px 100px ,red,yellow ,blue );
形状如果是椭圆的话,半径不能写成像素
farthest-side:圆心到最远的边;
clothest-side:圆心到最近的边;
farthest-corner:圆心到最远的角;
clothest-corner:圆心到最近的角;
分段渐变
background-image: repeating-linear-gradient(to right,skyblue,yellowgreen,orange 20%);
椭圆分段渐变
background-image: repeating-radial-gradient(farthest-corner ellipse at center center,red,yellow ,blue 6% );
transparent:透明色;
repeating-linear-gradient(to left,pink 0px,pink 10px, transparent 10px, transparent 20px); (格格)
雪碧图
1.工作中,ui设计师给我们提供设计图,设计图为psd格式
2.为了减小前端和服务器的链接次数(减小服务器的压力),一般把一些小的图片
放到一张图上,我们称之为Css sprites(雪碧图)
background: url("img/bg_v3.png")(图片)no-repe;