首页 > > 网页制作 > css >

HTML5语法基础学习笔记

2018-06-24 01:45:51来源：未知阅读 ()

1.行间样式
给单独的标签添加样式.
<div style="width:100px; height:100px; background-color:red;"></div>
优点：比较方便可以即时的添加属性。
缺点：修改属性非常麻烦、需要一个个去修改。

2.内联样式表
<style>
div{ 
}
</style>
优点：针对当前HTML文件有效。
缺点：多页面修改时繁琐困难。

3.外联样式表
<head>
<link rel="stylesheet" href="xx.css"/>
</head>

边框：
<style>
div{
width:400px;
height:400px;
border:1px solid red;
}
</style>

<body>
<div></div>
</body>

边框练习的步骤及需求.

1.先分析设计图的结构.
2.根据所分析的结构,进行结构编码.
3.根据所书写的结构,进行CSS编码.
4.利用PS工具,对设计图上的模块进行测量以及颜色的拾取.
5.样式添加.

background 背景
background-color 背景颜色
颜色英文关键字
RGB
十六进制
background-image 背景图
背景图默认铺满整个容器大小
background-repeat
背景是否重复
no-repeat
不重复
repeat-x;
X轴方向横向平铺
repeat-y;
Y轴方向纵向平铺
repeat；
X\Y都重复
background-position:X Y;
背景图位置
具体数值：
X轴：left right center
Y轴：top bottom center
当第二个Y轴属性值没有填写，默认居中。
background-attachment: fixed;
背景图是否滚蛋
fixed 固定在浏览器可视区域
scroll 跟随滚动条滚动
background
不分属性书写顺序的
颜色相关图片相关

切图：
1、头部区域（第一个块）切一张完整的图片
2、内容区域里的每一个小块需要有ICO并且还有背景颜色

文字样式：
font-weight 文字加粗
bold 加粗
normal 正常

font-style 文字倾斜
italic斜体

font-size 文字大小

font-family 字体

line-height 行高文字在一行里面所占用的位置

height:400px;
line-height:400px;
当行高的值与容器高度一致时文字会垂直居中显示

多行文字测量行高的方法：
1、确认文字大小
2、确认两行文字之间的空隙大小
3、空隙大小除以2，得出来的值就是每行文字的上下的空隙大小。
3.1当行高为奇数时，那么文字的上方要比下方少一个像素。
3.2当行高为偶数时，文字上下的空隙一致。
4.通过辅助线测量多行文字的行高。

文字的复合样式：
font:bold italic 26px/30px "微软雅黑";
font复合样式需要注意书写顺序
font: font-style | font-weight | font-size/line-height | font-family

文本设置：
color
文字颜色
text-align
文本对齐（显示）方式
left（默认值）
right（右边）
center（中间）
text-indent
首行缩进
em 是根据字体大小来计算的不管文字怎么变
1em = 等于始终缩进当前文字的大小
text-decoration 文本修饰
underline 下划线
letter-spacing 10PX 文本间距10个像素
word-spacing 单词的间距（以空格判断文字是否为单词）
white-spacing 强制不换行
nowrap 不换行
normal 正常
测量文字大小时、最好是使用从上到下的方式去测量。（左右会有缝隙）
一个空格有多大？
宋体字体下文字大小的一半
1.模块的文字、单词间距、文字行高要与设计图统一
2.思考题：每一行的前方粉色带三角的区域如何实现

padding内距填充
边距样式
padding 内边距
padding-top 上边内边距
padding-right 右边内边距
padding-bottom 下边内边距
padding-left 右边内边距

padding 内填充
注意：设置padding后回撑大容器的大小
padding填充可以上右下左分别设置（按照顺时针方向）
四个方向顺序 top right bottom left

padding复合写法：
只有一个属性值时：4个方向都是一个值
设置两个属性值时：第一个属性值设置的是上下两个方向
第二个属性值设置的是左右两个方向。
设置三个属性值时：第一个属性值设置的是上边一个方向。
第二个属性值设置是左右两个方向。
第三个属性值设置的是下边一个方向。
margin 外边距
标签与标签之间的间隔（距离）
margin复合写法：
只有一个属性值时：4个方向都是一个值
设置两个属性值时：第一个属性值设置的上下两个方向
第二个属性值设置的左右两个方向
设置三个属性值时：第一个属性值设置的是上边一个方向
第二个属性值设置的是左右两个方向
第三个属性值设置的是下边一个方向
margin遗留的问题：
1.margin-top传递的问题
2.margin上下叠压
1.还使用margin,可以将某一个元素方向设置成预想的值。取最大margin值。

盒模型
盒子大小=border+padding+width/height
盒子宽度=左border+左padding+右padding+右border
盒子高度=上border+上padding+下padding+下border 盒模型的大小：
border（左右）+padding（左右）+width/height
margin不占盒子里大小
CSS常用标签
a 超链接
伪类给元素添加特殊的效果
:link 未访问过的链接初始颜色
:visited 访问过后的链接颜色
:hover 鼠标移入（悬停）
:active 鼠标按下时链接的颜色
设置顺序 L、V、H、A

span标签区分样式
<header>（页眉）
主要用于页面头部的信息介绍，可用于板块头部
</header>
<nav>
导航包含链接的一个列表
<nav><a href="#">链接</a><a href="#">链接</a></nav>
</nav>
<footer>
页脚页面的底部和模块的底部
<footer>
<section>
页面的板块用于划分页面上的不同区域或者划分文章里不同的节
<section>
<article>
用来在页面中表示一套结构完整且独立的内容部分
</article>
<aside>
元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组。以及
</aside>
<time>
用来表现时间或日期
</time>

常用标签
<h1>Logo</h1> 最大权重最高
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6>标题</h6> 一层层走下来

<ul>·无序列表</ul>
<ol>1.有序列表</ol>
<ul>
<li>ul的子集下一级标签只能是li</li>
</ul>

<ol>
<li>ol的子集下一级标签只能是li</li>
</ol>

<dl>自定义列表</dl>
<dl>
<dt>自定义列表title</dt>（DL标签对只允许有一个）
<dd>自定义列表的列表项（信息）</dd>（可以有多个）
</dl>

特殊的单标签img
img 图片
img src="xx/xx.jpg"路径

标签样式初始化
css reset 原则
但凡是浏览器默认的样式，都不要使用
因为每个浏览器下标签的默认样式可能会不一致的情况（兼容性）。
人为的将所有样式全部统一（清楚），再根据实际情况（设计稿）进行设置
那些样式是需要重置的？？？
与盒模型相关的样式
border
margin
padding
标签特有的样式
ul>li
ol>li
h1,h2,h3,h4,h5,p,ul{
style...
}
群组选择器

书写原则：
用到什么标签就清楚所用标签的默认样式。
建议不要直接将所有标签全部加上。
不要将所有标签全部统一设置一致的reset,需根据标签默认样式特征来分类设置。

id选择器：当前页面唯一使用的标识、类似身份证，不要写多个。
<div id="box"></div>
<style>
#box{}
</style>

类选择器：.id名称可以是分段class姓名加在同一个
<div class="box bgc"></div>
<style>
.（box）class name{}
.bgc{}
</style>

标签选择器：当前页面上所有标签名为XXX的元素
div{}

群组选择器：用逗号分隔，被逗号分隔的元素（选择器）全部套用统一的样
式。
p,h1,div{}

包含选择器：我想找到box子级的div 目标父级元素目标元素空格-代表下一级（语法）
<style>
.box div{}
</style>
<div class="box">div1
<div>div2</div>
</div>

*通配符：找到页面上符合规则的所有元素
body *{}
!!!不建议使用通配符

优先级代码执行生效的顺序
选择器优先级:
style>id>class>类型选择>*
行间样式>id选择器>类选择器>标签选择器

行间样式￥1000
id选择器￥100
类选择器￥10
标签选择器￥1
价格越高权重越高

块元素：
1、默认独占一行
2、没有宽度时、默认撑满一行
3、支持所有CSS命令。

内嵌（内联、行内）元素的特征：
1、同排可以继续跟同类的标签
2、内容撑开宽度
3、不支持宽高
4、不支持上下的margin
5、代码换行被解析

块元素和内联元素转换
display:inline 显示为内联
使行块属性标签具备内联元素的特性
display:block 显示为块
使内联元素具备块属性标签的特性
display只是将标签转换为页面中显示的类型
display不会改变标签的本质（伪娘本体还是男性、只是暂时具备女性特征同理）

选择器的集体声明：
一次性选择多个标签，不同的标签之间用“，”分开。
比如
h1,h2,h3,h4,p,div{}
无论什么样的选择器:标签选择器,ID选择器,类选择器.只要是选择器,有公共的CSS代码就可以使用选择器的集体声明.
精简案例:
#header{font-size:14px; background:#ccc}
div{font-size:14px; width:960px;}
.blue{font-size:14px; color:#009;}
.h1{font-size:14px; font-weight:normal;}
可以精简font属性部分，写成以下：
#header,div,.blue,.h1{font-size:14px;}
#header{background:#ccc;}
div{width:960px;}
.blue{color:#009;}
.h1{font-weight:normal;}
【选择器的嵌套】
#div1 p a{color:#900;}/*意思是在ID为DIV1内的P标签的链接a标签的文字颜色是#900*/
这样好处不需要再单独为ID为DIV1内的P标签下面的a标签单独定义class或者id类，简化CSS代码。