Html5-css常用标签

最新推荐文章于 2022-09-12 15:06:15 发布

Kurt-Nirvana

最新推荐文章于 2022-09-12 15:06:15 发布

阅读量576

点赞数 1

分类专栏： Html5心得总结文章标签： html5 html css3 入门级常用标签

本文链接：https://blog.csdn.net/u010532761/article/details/50402724

版权

Html5心得总结专栏收录该内容

5 篇文章 0 订阅

订阅专栏

下面列距一些css3的入门级的常用属性：

先看一下html文件

然后看看body里的标签，很简单，一堆<p><ul><><li>

<body>
<p id="p1">生如夏花<p>
<p id="p2">死如秋叶<p>
<p id="p3">on my way<p>
<p id="p4">静静的村庄飘着白的雪</p>
<p id="p5">阴霾的天空鸽子飞翔</p>
<p id="p6">白桦树刻着那两个名字</p>
<p id="p7">他们发誓相爱用尽这一生</p>
<p id="p8">有一天战火烧到了家乡</p>
<p id="p9">小伙子拿起枪奔赴边疆</p>
<ul id="u01">
<li>实心圆</li>
</ul>
<ul id="u02">
<li>空心圆</li>
</ul>
<ul >
<li>不设置css属性</li>
</ul>
<ul id="u03">
<li>图片做列表符号</li>
</ul>
<ul id="u04">
<li>list-style-position:outside</li>
</ul>
<ul id="u05">
<li>list-style-position:outside</li>
</ul>
<p class="page01">闪起来</p>
<p class="page02">那些花儿</p>
<p class="page03">圣诞快乐</p>
<p class="page04">这里显示首行缩进这里显示首行缩进这里显示首行缩进这里显示首行缩进这里显示首行缩进这里显示首行缩进这里显示首行缩进这里显示首行缩进</p>
<p class="page05">control控kongzhi制English汉间距</p>
<p class="page06">All全部 in all全部 is 全部all we are结束</p>
<p class="page07">像一阵风掠过我身边当你错身而过的瞬间</p>
<p class="page08">忽然间，想要去很远</br></br></p>
<p class="page09">float属性设置</p>

<p class="p_font">与其苟延残喘 不如从容燃烧</p>
</body>

上面的大部分标签基本都设定了 id属性或者是 class属性

然后我们本文的重点就来了，对应css文件中的属性设置：

@charset "gbk2312";

/*某句无效果可能是由于上一句有bug导致影响到下一句。如 @charset "gbk2312" 缺少“;”将影响到p1的属性*/

#p1{font-size:40px;color:red}/*设置字体颜色及字体大小*/

#p2{font-size:xx-large;color:#aa0000}/*设置字体颜色及大小的另一种属性值*/

xx-small =9px

x-small =11px

small =13px

medium =16px

large =19px

x-large =23px

xx-large =27px

#p3{font-size:x-large;color:#a00}/*颜色值的简写*/

#p4{font-size:40px;font-family:"字体1","字体2","黑体"}/*优先级依次降低，如果第一个字体不存在则用第二个...*/

#p5{font-style:oblique}/*normal/italic/oblique三种属性值正常倾斜加深倾斜（基本看不出来）*/

#p6{font-weight:bold}/*bolder/bold/normal/100-900*/

#p7{text-align:center}/*水平对齐方式left/right/center/justify（两端对齐中文不起作用）

/*#p8{vertical-align:middle}*/

#p9{line-height:inherit}

/*行高：属性可以是：1.line-height可以被定义为：body{line-height:normal;}

2.line-height可以被定义为：body{line-height:inherit;}

3.line-height可以使用一个百分比的值body{line-height:120%;}

4.line-height可以被定义为一个长度值(px,em等) body{line-height:25px;}

5.line-height也可以被定义为纯数字， body{line-height:1.2}*/

/*u01-u05是列表的样式（ul ol 标签）*/

#u01{list-style-type:disc}

#u02{list-style-type:circle}

#u03{list-style-image:url(a.jpg)}

#u04{list-style-position:inside}

#u05{list-style-position:outside}

.page01{text-decoration:line-through}/*文本修饰*/

/*none:没有修饰 underline:添加下划线 overline:添加上划线 line-through:添加删除线 blink：闪烁（高版本不支持）*/

.page02{width:50px;height:100px;border:10px dashed red}

/*边框设置border：边框border:线型（solid/dashed/dotted/double）粗细（数值+单位）颜色*/

.page03{width:100px;border-top:solid 3px #0000aa}/*单边框设置（border-top border-right border-left border-bottom）*/

.page04{text-indent:20px}/*首行缩进*/

.page05{letter-spacing:30px}/*字间距*/

.page06{word-spacing:100px}/*词间距*/

.page07{background-color:gray}/*背景颜色（高亮）*/

.page08{background-image:url(a.jpg);color:#aa0000;background-repeat:no-repeat;font-size:100px;background-position:100px 50px}

/*上面属性分别是：背景图字体颜色平铺效果字体大小背景偏移量*/

/*background-position:left/center/right/数值 top/center/bottom/数值;*/

.page09{float:right}/*浮动属性（none left right）常用在图文混排中规划图片位置

.p_font{font:italic bold small-caps 120px/1.5em "黑体","仿宋"}/*<span style="color:#ff6666;">font的缩写*/

记录一种font的简写：

.font{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:arial,verdana;
}

可简写为：.font{font:italic small-caps bold 12px/1.5em "黑体","仿宋";} 这里需要注意的是 font-size和line-height合并为一个属性，且必须存在，否则其他设置将失效。

Kurt-Nirvana

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html5-css常用标签

下面列距一些css3的入门级的常用属性：先看一下html文件先在head标签里声明引用的css文件然后看看body里的标签，很简单，一堆生如夏花死如秋叶on my way静静的村庄飘着白的雪阴霾的天空鸽子飞翔白桦树刻着那两个名字他们发誓相爱用尽这一生有一天战火烧到了家乡小伙子拿起枪奔赴边疆实心圆空心圆不设置css属性图片做列表符号l
复制链接

扫一扫

专栏目录