HTML + CSS
1.HTML(hypertext markup language) :超文本标记语言
2.html是纯文本的便签语言,不写标签,也可以显示文本内容,只是内容没有语义
3.HTML主题分为2个部分 head 和 body 部分, head 里面放的辅助内容如:文字的格式,关联链接,body 里面主要显示内容,一切需要显示的内容都放在 body 里面如:音频,视频,图片,链接
4.HTML 的标签都可以带有属性,属性直接放在标签的后面
5.常用的标签对: <title></title> -> 设置标题
<h1></h1>....<h6></h6>->设置文本字体的大小 <div></div> -> 分割页面布局
<p></p>和<br></br> 换行
<strong></strong> 加粗
<img> 图片
<a href></a> 链接
<button></button> 按钮
<input></input> 文本输入
<ol></ol> 列表标签
<ul></ul> 无序列表
<li></li> 列表中的元素
6.CSS 主要用于对 body 内容进行一些属性,样式的填充
7.与 CSS 关联,需在 head主体里面使用 link 导入链接
8.http : 超文本传输协议,HyperText Transfer Protocol (HyperText Transfer Protocol over Secure Socket Layer)
https 则是具有安全性的ssl加密传输协议
CSS 部分属性内容
一. 权重问题
1.1同一个标签携带多个类名,有冲突的
<style type="text/css">
p{
color: black !important;
font-size: 20px;!important; 这个是错误的使用方法,分号代表这句话已经结束了
font-size: 60px important; 这个错误使用,没有添加感叹号
font-size: 60px !important; 这个是正确使用
}
.spec1{
color: blue;
}
.spec2{
color: red;
}
</style>
Important是英文中重要的意思,我们可以通过语法:
color: yellow !important; 通过important提高一个属性的权重,这个属性的权重就是无穷大
注意:
一. !important提升的是一个属性,而不是一个选择器
二. !important无法提升继承的权重,该是0还是0
三. 当前的!important不影响就近原则
比如HTML结构
<div>
<p>欢迎来到图书馆</p>
</div>
有CSS的样式
<style type="text/css">
div{
color: red !important;
}
p{
color: blue;
}
</style>
由于div是通过继承性来影响文字颜色的,所有!important无法提升它的权重,权重依然是0,干不过p,p标签是实实在在选中文字,所以字体还是蓝色
二. 盒子模型
2.1、一个盒子主要属性就5个:width,height。Padding,margin, border
width是“宽度”的意思,CSS中width指的是内容的宽度,而不 是盒子的宽度。
height是“高度”的意思,CSS中height指的是内容的高度,而 不是盒子的高度
padding是“内边距”的意思
border是“边框”
margin是“外边距”
下面的盒子真实占有的大小
div{
200px;
height: 200px;
border: 1px solid red;
padding: 10px;
margin: 100px;
float: left;
}
真实占有的宽度 = 左边的border +左边的padding + width +右边的border +右边的padding
2.2、 认识padding
padding内边距,padding背景颜色一定和内容区域一样的,background-c olor将填充border以内所有的区域
padding-right: 10px;
padding-left:20px;
padding-top:30px;
padding-bottom:40px;
2.3、margin
margin-left: 100px;
margin-top: 100px
margin-bottom: 100px
margin-left: 100px
注意:
使用的时候与float会相互影响,可以使用clear:both,清除浮动.
margin:0 auto 这个盒子居中,不是居中文本,必须是有明确width,
padding本质上指父子关系,margin是兄弟的关系
2.4、border
边框的三要素:粗细、线性、颜色
dashed、dotted、solid、double、groove、ridge、inset、outset
1) 块级元素
● 霸占一行,不能与其他任何元素并列
● 能接受宽、高
● 如果不设置宽度,那么宽度将默认变为父亲的100%。
2) 行内元素
● 与其他行内元素并排
● 不能设置宽、高。默认的宽度,就是文字的宽度。
Display:”显示模式”,用来修改元素的行内、块级的性质
Inline就是“行内”
一旦给当前一个便签设置 display:inline 这个标签立刻改变为行内元素与span 类似没有区别
一旦给当前一个便签设置 display:block 这个标签立刻改变为块级元素与div类 似没有区别
三. 浮动FLOAT
清除float的方法:
1. clear:both(表示当前自己内部的元素不受其他盒子的影响)
2. overflow:hidden(超出范围内就隐藏)
3. 浮动的元素,只能被有高度的盒子高度,就是说,如果盒子的内部有 浮动,那么浮动会在一定范围内互相影响(加高法)
3.1、LINE-HEIGHT
css中的任何文本都有有行高(line-height),行的高度,必须有元素对应的 高度,才能使用line-height
text-indent:2em; 首行空二个汉字的格,单位比较奇怪,叫做em就是汉字 的宽度。Indent-缩进的意思
3.2、font
font-size(尺寸) 、 line-height(行高)、 font-family(字体)
页面中,中文我们只使用: 微软雅黑、宋体、黑体。 如果页面中,需 要其他的字体,那么需要切图。英语:Arial 、 Times New Roman
3.3、超级链接伪类
:link 表示, 用户没有点击过这个链接的样式。 是英语“链接”的 意思。
:visited 表示, 用户访问过了这个链接的样式。 是英语“访问过 的”的意思。
:hover 表示, 用户鼠标悬停的时候链接的样式。 是英语“悬停”的 意思。
:active 表示, 用户用鼠标点击这个链接,但是不松手,此刻的样 式。 是英语“激活”的意思。
3.4、z-index 表示的是谁压着谁,数值大的压着数值的小
切记:只有定位了元素,才能有z-index值,不管是绝对定位还是相 对定位,注意float的东西不能使用z-index默认是为0