国瑞个人博客
首页 > 前端 > Html+Css > 前端HTML与CSS笔记详解

前端HTML与CSS笔记详解

前端HTML与CSS笔记详解

 2017年04月05日 作者: 国瑞个人博客 520次浏览

一.CSS的引入样式

1.行间样式的引入

写法:在标签中,写一个style的属性比如:style="....."在引号当中,写相应的css样式
缺点:不利于维护,不利于代码重用
优点:优先级最高

2.内部样式表的引入

写法:在head标签里,写一个style的标签,在标签中,通过选择器来控制样式
选择器:标签名选择器
写法:div{...css的样式}

ID选择器

写法:首先在相应标签中设置一个ID的属性,如:id="id名"
在样式表中,通过#+id名{...css的样式}
温馨小提示:
id名要以英文字母开头
id名不能重复,是唯一的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<ol>
    <li style="list-style-type: none;">
<ol>写法:首先在相应标签中设置一个class的属性,如:class="class名"在样式表中,通过.+class名{……css的样式……}</ol>
</li>
</ol>
&nbsp;
<ol>
    <li style="list-style-type: none;">
<ol>温馨小提示</ol>
</li>
</ol>
&nbsp;
<ol>class名以英文字母开头</ol>
<code>优先级</code>
<ul>
    <li>标签名选择器&lt;class选择器&lt;id选择器&lt;行间样式

优点:加载速度快,不需要去请求服务器
缺点:不利于代码重用
3.外部样式表的引入
写法:在head标签里,写一个link标签,用来关联一个css的文件,在css文件中,通过选择器来控制样式
温馨提示.
<linkrel="stylesheet"href="css文件的路径"> 优点:利于代码重用
缺点:需要加载服务器

二.CSS的基础样式

1
2
3
4
5
6
7
8
9
Width宽Height高
background背景
背景色:background-color:颜色值英文单词十六进制rgb
背景图:background-image:url("图片路径")
背景图平铺:background-repeat: no-repeat repeat-x repeat-y
背景图定位:background-position:
第一个值(X轴的位置)第二个值(Y轴的位置);
第一个值:left center right 30px;
第二个值:top center bottom 100px;
1
2
3
4
复合写法:background: color image position repeat;
背景图滚动:background-attachment: fixed;
背景图尺寸:background-size:第一个值(X轴的比例)第二个值(Y轴的比例);
温馨小提示:css3的样式不兼容

第四讲终止

第5讲

一.border

1.border 边框

1
2
3
4
5
6
7
8
9
10
复合写法
border: border-width border-style border-color;

border-width 边框宽度
border-style 边框样式 solid 实线 dashed 虚线 dotted 点线 (点线IE6不认)
border-color 边框颜色 英文单词 十六进制 rgb

border-radius 圆角
transparent:透明
对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色}

二.Padding

1
2
3
4
5
padding 内边距 内填充
padding-top 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距
1
2
3
4
5
padding的复合写法
padding:10px; 一个值代表 上右下左都是10px
padding:10px 20px; 两个值 第一个值代表上下 第二个值代表左右
padding:10px 20px 40px; 三个值 第一个值代表上 第二个值代表左右 第三个值代表下
padding:10px 20px 40px 80px; 4个值 第一个值代表上 第二个值代表右 第三个值代表下 第四个值代表左

三.Margin

1
2
3
4
5
margin 外边距
margin-top 上外边距
margin-right 右外边距
margin-bottom 下外边距
margin-left 左外边距
1
2
3
4
5
margin的复合写法
margin:10px; 一个值代表 上右下左都是10px
margin:10px 20px; 两个值 第一个值代表上下 第二个值代表左右
margin:10px 20px 40px; 三个值 第一个值代表上 第二个值代表左右 第三个值代表下
margin:10px 20px 40px 80px; 4个值 第一个值代表上 第二个值代表右 第三个值代表下 第四个值代表左

四.margin的小性子

标签的嵌套 确定父子级关系

1. 第一个子级的margin-top会在特定的情况下穿透父级

规避方法:

1
2
3
4
1.给父级加边框
2.给父级加overflow:hidden;
3.不要用margin-top,父级的padding-top代替
2. 兄弟关系的margin-top和margin-bottom 会叠压

五.盒模型
盒模型:

1
2
3
空间大小 :
盒子的总宽度 : border-left + padding-left + width + padding-right + border-right
盒子的总高度 : border-top + padding-top + height + padding-bottom + border-bottom

位置: margin

第6讲

一.一大波儿CSS样式来袭!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
1.常见样式 —文本设置
font-size 文字大小(一般均为偶数)
font-family
中文 SimSun (宋体) SimHei (黑体) Microsoft YaHei (微软雅黑) STKaiti (华文楷体)
英文 Arial Georgia Helvetica sans-Serif
color 文字颜色(英文、rgb、十六位进制色彩值)
line-height 行高 (具体的数值)
text-align 文本对齐方式 (left center right)
text-indent 首行缩进(em缩进字符或者是具体的数值)
font-weight 文字着重 (normal bold bolder 100~900)
font-style 文字倾斜 (normal italic oblique)
text-decoration 文本修饰 (none underline overline line-through)
letter-spacing 字母间距 (具体的数值)
word-spacing 单词间距(以空格为解析单位)

二.常见复合属性
1.复合属性:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
background:
background-color background-image background-position background-repeat
border
border-width border-style border-color
padding (四种情况)
margin (四种情况)
font:
font-style | font-weight | font-size/line-height | font-family;
font:normal 19px/36px "Microsoft yahei";
css样式继承之文本样式
font-size 文字大小(一般均为偶数)
font-family 字体(中文默认宋体)SimHei (黑体) Microsoft YaHei (微软雅黑) SimSun (宋体) STKaiti (华文楷体)
color 文字颜色(英文、rgb、十六位进制色彩值)
line-height 行高 (具体的数值)
text-align 文本对齐方式 (left center right)
text-indent 首行缩进(em缩进字符或者是具体的数值)
font-weight 文字着重 (normal bold bolder 100~900)
font-style 文字倾斜 (normal italic oblique)
text-decoration 文本修饰 (none underline overline line-through)
letter-spacing 字母间距 (具体的数值)
word-spacing 单词间距(以空格为解析单位)

三.常见样式17个

1
2
3
4
5
6
7
8
9
width 宽度 height 高度
background 背景 border 边框
padding 内边距 margin 外边距
font-size 文字大小 font-family 字体
color 文字颜色 line-height 行高
text-align 文本对齐方式 text-indent 首行缩进
font-weight 文字着重 font-style 文字样式
text-decoration 文本修饰 letter-spacing 字母间距
word-spacing 单词间距

第7讲
一.常见标签-块属性的标签
语义:你说的话到底是什么意思
权重:优先先考虑谁

1.title标签

写法:
双标签
语义:网页标题
权重最大

2.div标签

写法:

双标签
语义:无意义
默认样式:无

3.h标签

h1~h6
写法:

1
2
3
4
5
6
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

双标签

语义:标题
默认样式:font-size font-weight margin

1
2
3
4
5
6
7
8
9
10
11
权重 :h1 最大 h2 次之 h3更次之 。
h1页面中最好不要超过一个
h2页面中最好不要超过12个
h3之后的h标签就随便了

样式初始化文件 reset.css

群组选择器 , 例 :
h1,h2,h3,h4,h5,h6{
margin:0;
}

4.p标签

1
2
3
4
5
6
7
写法:

<p>
双标签
语义:段落
默认样式:margin
p标签在嵌套时不要包含块元素的标签</p>

5.ul标签

写法:

双标签
语义:无序列表
默认样式:margin padding-left list-style-type

6.li标签

写法:

双标签
语义:列表项
默认样式:list-style-type

7.ol标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
写法:

双标签
语义:有序列表
默认样式:margin padding-left list-style-type

ul,ol和li 是组合标签
ul,ol的第一层子级一定是li li的父级一定是ul或ol
例子:
<ul>
    <li>
<h2></h2>
</li>
</ul>
<div>
<ul>
    <li></li>
</ul>
</div>
<ol>
    <li>
<ul>
    <li></li>
</ul>
</li>
</ol>
<div>
<ol>
    <li></li>
</ol>
</div>

8.dl标签:自定义列表 字典标签

1
2
3
4
5
6
dl dt dd
写法:
<dl></dl>
双标签
语义:自定义列表
默认样式:margin

9.dt

1
2
3
4
5
写法:

双标签
语义:列表标题
默认样式:无

10.dd

1
写法:

双标签

1
2
3
4
5
6
7
语义:列表说明
默认样式:margin-left
块标签的特征:
块属性的标签 特性:
1.默认是父级100%的宽
2.支持所有CSS样式
3.独占一行

二.常见标签-内联属性的标签

1
2
3
4
5
6
7
内联属性的标签
内联标签
特性:
1.同属性的标签排在同一排
2.内容撑开宽度
3.不支持宽高,不支持上下的padding和margin
4.代码换行被解析 间距大小取决于父级的font-size的大小

1.strong标签

1
2
3
4
5
写法:
双标签
语义:强调
默认样式:font-weight
权重比较高

2.span标签

1
2
3
4
写法:
双标签
语义:无意义
默认样式:无

3.em标签

1
2
3
4
5
写法:
双标签
语义:强调
默认样式:font-style
权重比较高

4.a标签

写法:
双标签
语义:超链接
默认样式:color text-decoration cursor
温馨提示:
href属性中
1.如果要链接一个网站地址的话,一定要加 http://
2. # 代表链接到当前页
target
_self 默认 在当前窗口打开 _blank 在新窗口打开

三.内联块标签
内联块属性 特性:
1.同属性的标签排在同一排
2.内容撑开宽度
3.支持所有的css的样式
4.代码换行被解析,间距大小取决于父级的font-size大小
img标签
写法:图片说明
单标签
语义:图片
默认样式:低版本浏览器中有默认的边框
温馨小提示:
1.路径地址一定要正确 2.alt属性一定要写
四.标签类型的转换
显示为无:display:none;
块属性 display:block;
内联属性:
内联 display:inline; 内联块 display:inline-block;
第8讲

一.浮动到底是什么鬼

1
display:inline-block; 浮动: float

二.浮动的特性

1
2
3
4
浮动的特性
1.浮动的元素排在同一排 2.浮动的元素内容撑开宽度
3.浮动的元素支持所有的css样式 4.浮动的元素脱离文档流
5.浮动的元素提升层级半级

三.bfc

1
2
3
4
1.overflow:溢出 会重新计算元素的空间
hidden 溢出隐藏
auto 溢出出现滚动条
scroll 出现滚动条的位置
2.元素的居中
1
margin:0 auto;
3.元素的伪类
1
2
3
伪类:就是CSS一些元素身上的特殊属性
:hover 鼠标停留
:after 在元素内容之后插入一些内容
4.什么叫浮动:
1
2
3
其实就是使元素脱离文档流,按照一定的方式排列,遇到相邻的浮动元素或者父级的边界停下来。
四.BFC的好处与坏处
BFC 就是清浮动 就是用来处理浮动元素脱离文档流的问题

1.父级也浮动

1
弊端:左右的margin:0 auto; 会失效;

2.父级加display:inline-block

1
2
弊端:左右的margin:0 auto; 会失效;
(如果需要让元素居中可以给父级加text-align:center)

3.给父级加高

1
弊端:扩展性不好

4.br标签

1
2
写法:
作用:换行

5.clear

1
2
3
4
clear 元素的某一方向不允许出现其他的浮动元素
left right both 推荐使用one
温馨小提示
不符合W3C规范 违反结构 样式 行为 三者分离原则

6.伪类清浮动

1
2
:after{content:"";display:block;clear:both;}
温馨提示:目前主流方法。建议使用

五.定位的属性及特性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
定位: 把一个元素 按照一定的方式 定到页面的某一个位置
定位: position
1.相对定位:relative
针对自己本身的位置进行定位
2.绝对定位:absolute
针对有定位的父级的原点进行定位,如果父级没有定位,会找父级的父级身上有没有定位,如果有,针对父级的父级的原点进行定位,以此类推,如果都没有定位,针对document进行定位
温馨小提示:
绝对定位即使没有初始值,也一定要设置值 例子:left:0px; top:0px;

固定定位:fixed 针对页面窗口进行定位
温馨提示: IE6 不支持固定定位

偏移量: Left top right bottom
温馨提示: left top 比 right bottom 的优先级要高

六.三种的定位的特性

1
定位的三种特性
1
2
3
4
5
6
7
8
9
10
11
1.相对定位 relative
1.不影响元素本身的特性
2.不使元素脱离文档流
3.提升层级
4.无法触发BFC
5.针对自己本身进行定位
2.绝对定位 absolute
1.会使元素完全脱离文档流
2.内容撑开宽度和高度
3.使元素支持所有的CSS样式
4.提升层级
1
2
3
4
5
z-index:数值; 定位层级设置
数值越大,层级越高
5.绝对定位要和相对定位配合使用
6.如果有定位父级,针对定位父级发生偏移,没有定位父级,针对document进行偏移
7.如果绝对定位的子级有浮动,可以省略清浮动的操作

3.固定定位 fixed

1
2
3
1.不兼容IE6
2.针对窗口进行定位
3.如果固定定位的子级有浮动,可以省略清浮动的操作

七.派生选择器

1
2
3
4
5
是由 id选择器 class选择器 标签名选择器组合而成
id选择器 10000
class选择器 100
标签名选择器 1
#box2 span 10000 + 1 10001

第9讲

1.兼容性到底是什么玩意

1
2
3
兼容性:页面在不同的浏览器中可能会显示不同。
在IE6下,子级的宽度会撑开父级设置好的宽度
温馨小提示:盒模型的计算一定要精确,否则IE浏览器可能会显示不同

2.兼容性2

1
ie6中,元素浮动,如果宽度需要内容撑开,需要给里面的块元素都添加浮动才可以

3.兼容性3
在IE6.7下 元素要通过浮动排在同一排,就需要给这行元素都加浮动
4.兼容性4

1
注意标签的嵌套规则

5.兼容性5

1
2
在IE6下元素的高度如果小于19px的时候,会被当成19px来处理
解决方法:overflow:hidden;

6.兼容性6

1
2
在IE6下不支持1px的dotted边框样式
解决方法:切背景平铺

7.兼容性7

1
2
3
4
haslayout
在IE下大部分兼容性都是因为haslayout属性的触发问题,尽量触发haslayout属性,可以减少很多IE下的兼容下的问题。
在IE下父级有边框的时候,子元素的margin会失效
解决方法:触发父级的haslayout属性

8.兼容性8

1
2
ie6下双边距的bug
在ie6下,块元素有浮动有横向的margin的值的时候,横向的margin的值会扩大两倍

9.兼容性9

1
2
margin-left 一行中左侧的第一个元素有双边距
margin-right 一行中右侧的第一个元素有双边距

10.兼容性10

1
2
在IE6,7下,li本身没有浮动,li里面的内容有浮动,li下会产生一个间隙
解决方法:

1.给li加浮动
2.给li加vertical-align:top
11.兼容性11

1
在IE6,7下,li本身没有浮动,li里面的内容有浮动,li下会产生一个间隙

解决方法:
1.给li加浮动

1
2
2.给li加vertical-align:top
在IE6下最小高度的bug 和 li的间隙问题共存的时候,给li加浮动 ,vertical-align不好使

12.兼容性12

1
当一行子级元素宽度之和和父级的宽度相差超过3px,或者子级元素不满行的情况的时候,最后一行的子级元素的margin-bottom会失效

13.兼容性13

1
2
3
4
在ie6下的文字溢出bug
子元素的宽度和父级的宽度如果相差小于3px的时候,
两个浮动元素中间有注释或者内联元素,就会出现文字溢出,内联元素越多,溢出越多
解决办法:用div把注释或者内联元素包起来

14.兼容性14

1
2
3
在IE6下,当浮动元素和绝对定位元素是兄弟关系的时候,绝对定位会失效
解决方法:
不让浮动元素和绝对定位元素是兄弟关系,用div或者其他标签把a标签包起来

15.兼容性15

1
2
在IE6.7下,子级元素有相对定位,父级overflow包不住子级元素
解决方法:给父级也加相对定位

16.兼容性16
在IE6下,如果绝对定位的父级宽高是奇数的时候,子级元素的right和bottom值会有1px的偏差
18.兼容性18

1
2
在IE6.7下 输入型的表单标签控件上下会有1px的间隙。
处理方法:给input加浮动

21.兼容性21

1
2
3
4
css hack:
ie9 ie10之前的ie浏览器解析的代码
+或者* 表示ie7包括7之前的ie浏览器
_表示 ie6包括6之前的ie浏览器
百度已收录

点击快速分享:

以上就是国瑞前端个人博客带来的是《前端HTML与CSS笔记详解》,感谢您的观看!

如果没有特殊的说明,本文即为国瑞前端博客原创(www.huanggr.cn),欢迎读者转载并保留本站版权!https://www.huanggr.cn/10.html

「专业前端博客,如果觉得我的文章对您有用,请帮助本站成长」

赞( 20 ) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
20

谢谢你请我吃鸡腿*^_^*

支付宝
微信
标签:

上一篇:

下一篇:

相关文章:

共有 0 条评论

博客简介

国瑞个人博客: https://www.huanggr.cn/,我们关注Web前端开发技术,web前端开发,移动前端开发,前端资讯,同时分享前端资源和工具等,期待你的参与,了解更多..

博主独立研发主题:

本站唯一QQ群

加入国瑞个人博客QQ群

本群为学习探讨群,主要和前端相关,欢迎广大前端(抱有学习目的均可)爱好者加入!广告请勿添加!

升级版本

web前端开发博客,基于vue脚手架制作的前端博客正在制作中,尽情期待,目前示例的代码位于此处

最新版本(尽请期待)-web前端开发博客

精彩评论

本站主要提供服务

二年web前端开发博客,本站专注提供web资源下载,技术问题解答,经验分享,也提供新手的web技术指导,二年前端个人博客,期待你的加入!

站点统计

  • 文章总数: 269 篇
  • 草稿数目: 50 篇
  • 分类数目: 26 个
  • 页面总数: 16 个
  • 评论总数: 223 条
  • 链接总数: 10 个
  • 标签总数: 104 个
  • 建站时间: 808 天
  • 注册用户: 659 人
  • 访问总量: 8785293 次
  • 最近更新: 2019年7月15日
-->