Web前端之路我们就爱程序媛让前端飞

HTML学习笔记(三)之CSS样式(1)

2017-07-10  本文已影响54人  胡溪玥

一、CSS样式及CSS样式的作用

 1.1 什么是CSS

   CSS也是我们常叫的样式表、通俗叫切图和静态网页布局。我们知道HTML网页是由若干标签和内容组成。标签包括了div标签span标签a锚文本标签strong加粗标签b加粗标签p段落标签br换行标签   img图片标签 等组成。这些标签组成html网页后,由CSS控制这些标签对象的宽度,高度、float浮动、文字大小,字体、颜色及CSS的背景。

简而言之,CSS的作用就是让网页可以“穿上漂亮衣服”,一个完整漂亮网页,就是由html标签与控制这些标签布局和美化功能CSS组成。

二、CSS各种样式详解及举例

2.1 CSS字体样式

font字体样式

a.font-family属性(设置字体)


b. font-size属性 (设置字体大小)


设置字体显示的大小

c.font-style属性(字体风格属性)

d.font-weight属性(字体的粗细)

字体的粗细

font属性(字体的所有属性)

字体属性的顺序:字体风格→字体粗细→字体大小→字体类型

字体属性例子

使用案例:

1.在html文件中,通过<style type="test/css"> 引入设置<p></p>(段落标签里面字体样式)

加入了字体样式 使用了字体样式的web页面展 字体样式展现

2.2  CSS文本样式

CSS文本样式

text-decoration属性可以取值分别有下列值:

text-decoration取值说明

2.3 CSS设置对齐方式

文本的对

2.4 CSS超链接样式

伪类访问样式 使用css设置超链接 伪链接WEB项页面示例图

2.5 CSS设置鼠标外观

CSS鼠标样式 鼠标样式未意图

2.6 CSS设置背景样式

常见背景图样式效果

a. background-color (背景颜色)

b. background-image (背景图像)

背景图像样式使用方法

c.background-repeat (背景重复方式)

d.background-position(背景定位)

背景样式使用例子

2.7  CSS列表样式

CSS列表样式 列表样式使用效果图
上一篇 下一篇

猜你喜欢

热点阅读