鸟零基础学习HTML5   ----- 2.2、CSS样式

一、背景

1、Css允许应用纯色作为背景,也允许背景图像创建相当复杂的效果

2、CSS背景常见的属性

二、文本

1、CSS文本属性可定义文本外观

2、通过文本属性,可以更改文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进、

3、常用属性

三、 字体

Css字体属性定义文本的字体系列、大小、加粗、风格和变形。

Css字体常用属性

四、链接

1、CSS链接的四种状态

a:link 普通的、未被点击的链接

a:visited 用户已经点击的链接

a:hover 鼠标指针位于链接的上方

a:active 链接被点击的时刻

2、常见的链接样式:

text-decoration属性大多用于去掉链接中的下划线

3、设置背景颜色

background-color

五、列表

1、CSS列表

Css列表属性允许你放置、改变列表图标,或者将图像作为列表项

2、CSS列表常用属性

六、表格

1、CSS表格

CSS表格属性可以帮助我们极大的改善表格的外观

2、表格边框

如需在 CSS 中设置表格边框,请使用 border 属性。

3、折叠边框

border-collapse 属性设置是否将表格边框折叠为单一边框:

4、表格宽高

通过 width 和 height 属性定义表格的宽度和高度。

5、表格文本对齐

text-align 和 vertical-align 属性设置表格中文本的对齐方式。

text-align 属性设置水平对齐方式,比如左对齐、右对齐或者居中:

vertical-align 属性设置垂直对齐方式,比如顶部对齐、底部对齐或居中对齐:

6、表格内边距

如需控制表格中内容与边框的距离,请为 td 和 th 元素设置 padding 属性:

7、表格颜色

七、轮廓

轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度。

时间: 2024-10-17 13:27:26

鸟零基础学习HTML5   ----- 2.2、CSS样式的相关文章

蓝鸥零基础学习HTML5第八讲 样式布局一

蓝鸥零基础学习HTML5第八讲 样式布局一 1.浮动到底是什么鬼 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*body { font-size:0px; }*/ div { width:100px; height:100px; text-align: center; line

蓝鸥零基础学习HTML5第八讲 样式布局二

蓝鸥零基础学习HTML5第八讲 样式布局二 1.定位的属性及特性 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box1 { width:400px; height:400px; border:10px solid red; margin:0 auto; position: re

蓝鸥零基础学习HTML5—html+css基础

蓝鸥零基础学习HTML5-html+css基础 一.课程目标 1.了解前端开发职位:2.掌握常用标签以及语义及用法:3.掌握常用css的特性,掌握基础布局技巧:4.掌握整站规划概念. 二.适用人群 零基础积极学习html5者 三.课程简介 本课程主要讲解了 html+css的基础知识,包括html模板.标签.css基础样式.布局.表格表单.整站等等,是进行前端开发的基础.Html+css是前端开发的基础,大部分前端开发工程都需要从html+css布局开始,html+css的基础非常重要,是前端开

蓝鸥零基础学习HTML5第六讲 CSS的常见样式

蓝鸥零基础学习HTML5第六讲 CSS的常见样式 CSS的常见样式 1.css文本样式的设置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { font-size:160px; font-family: "sans-Seri

蓝鸥零基础学习HTML5第九讲 兼容性七

蓝鸥零基础学习HTML5第九讲 兼容性七 1.兼容性19 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { background: #000; } .box { width:400px; height:400px; background: url("img/1.

蓝鸥零基础学习HTML5第七讲 常见标签及标签类型的转换

蓝鸥零基础学习HTML5第七讲 常见标签及标签类型的转换 1.常见标签-块属性的标签 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/reset.css"> </head> <

蓝鸥零基础学习HTML5第九讲 兼容性五

蓝鸥零基础学习HTML5第九讲 兼容性五 1.兼容性13 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width:400px; } .left { float: left; } .right { float: right; width:400px; } </s

蓝鸥零基础学习HTML5第九讲 兼容性六

蓝鸥零基础学习HTML5第九讲 兼容性六 1.兼容性16 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width:200px; height:200px; border:1px solid #000; position: relative; } .box span

蓝鸥零基础学习HTML5第九讲 兼容性一

蓝鸥零基础学习HTML5第九讲 兼容性一 1.兼容性到底是什么玩意 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box { width:400px; } .left { width:200px; background: red; height:300px; float:left