学习目标：

掌握css层叠样式表基础教程
CSS语法、选择器、字体样式、边框、背景、图片格式详解

学习内容：

css样式规则

基本语法：

A{属性:值;
属性:值;
}

1、选择器用于指定css样式作用的HTML对象，花括号内是对该对象设置的具体样式。
2、属性和属性值以“键值对“的形式出现。
3、属性是对指定的对象设置的样式属性，例如字体大小，文本颜色等。
4、属性和属性值之间用英文”:"链接。
5、多个”键对值”之间用英文“:"进行区分。
可以用段落和表格的对齐的演示。

css字体样式

：

font-size:字体大小;
font-family:宋体（字体格式）;
font-weight:字体粗细;
color:字体颜色;

Google图标测试：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><style>span {font-size: 100px;}.blue{color: blue;}.orange{color: orange;}.red{color: red;}.green{color: green;}</style></head><body><span class="blue">G</span><span class="red">o</span><span class="orange">o</span><span class="blue">g</span><span class="green">l</span><span class="red">e</span></body>
</html>

CSS文本

color 属性用于设置文本的颜色。

body {color: blue;
}h1 {color: green;
}

css文本对齐

text-align 属性用于设置文本的水平对齐方式。

/*水平居中对齐*/
h1 {text-align: center;
}
/*居中左对齐*/
h2 {text-align: left;
}
/*居中右对齐*/
h3 {text-align: right;
}

文字装饰：

text-decoration 属性用于设置或删除文本装饰。
text-decoration: none; 通常用于从链接上删除下划线。

a {text-decoration: none;
}

文字缩进

text-indent 属性用于指定文本第一行的缩进：

p {text-indent: 50px;
}

字母间距

字与字之间的间隔
letter-spacing

h1 {letter-spacing: 3px;
}

字间距

每个单词之间的间隔
word-spacing

h1 {word-spacing: 10px;
}h2 {word-spacing: -5px;
}

行高

line-height 属性用于指定行之间的间距：

p.small {line-height: 0.8;
}p.big {line-height: 1.8;
}

选择器：
类选择器：class，好比人的名字，是可以重复使用的
id选择器：id 好比人的身份证，只能使用一次，不能重复使用

链接伪类选择器：

                         :link 链接为访问的链接:visited 链接已访问的链接:honver 鼠标移动到连接上:active 选定的链接（当点击链接，不松开鼠标时的状态）

first-child:选取属于其父元素的首个子元素的指定选择器
last-child：选取属于其父元素的最后一个子元素的指定选择器
nth-child(n)：匹配属于其父元素的第n个元素，不论元素类型even 偶数 odd 奇数如果用公式n从0开始2n就是0 2 4 6 8
3n 0 3 6 9
：nth-last-child（n）：选择器匹配属于其元素的第n个子元素的每个元素，不论元素类型，从最后一个子元素开始技术。
n可以是数字，关键词或公式

目标伪类选择器：

target：可用于当前活动的目标元素

line-height:行高

css调用

内部样式表
内部样式在 HTML 页面的 head部分内的 style 元素中进行定义：

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: linen;
}h1 {color: maroon;margin-left: 40px;
}
</style>
</head>
<body><h1>This is a heading</h1>
<p>This is a paragraph.</p></body>
</html>

外部样式表：
调用外部css

<link rel="stylesheet" href"style.css" type="text/css" />

行内 CSS
行内样式在相关元素的 “style” 属性中定义：

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

注释

位于元素内的 CSS 注释，以 / 开始，以 / 结束：

/* 这是一条单行注释 */

背景图片跟随页面滚动

background-attachment:
跟随：fixed
不跟随：scroll

/*跟随页面滚动*/
body {background-image: url("tree.png");background-repeat: no-repeat;background-position: right top;background-attachment: fixed;
}
/*不跟随页面滚动*/
body {background-image: url("tree.png");background-repeat: no-repeat;background-position: right top;background-attachment: scroll;
}

css外边距

CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间。
margin-top 上边距
margin-right 右边距
margin-bottom 下边距
margin-left 左边距
外边距合并
指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并

CSS内边距

padding 属性是以下各内边距属性
padding-top 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距

CSS宽高

css设置div元素的高度与宽度
height:高度
width：宽度

div {height: 200px;width: 50%;background-color: powderblue;
}

css框模型

内容 - 框的内容，其中显示文本和图像。
paading内边距 - 清除内容周围的区域。内边距是透明的。
border边框 - 围绕内边距和内容的边框。
margin外边距 - 清除边界外的区域。外边距是透明的。

设置链接样式

链接可以使用任何 CSS 属性来设置样式。
可以根据链接处于什么状态来设置链接的不同样式。

四种链接状态分别是：/* 未被访问的链接 */
a:link {color: red;
}/* 已被访问的链接 */
a:visited {color: green;
}/* 将鼠标悬停在链接上 */
a:hover {color: hotpink;
}/* 被选择的链接 */
a:active {color: blue;}

学习时间：

11月19日-11月23日

Css3学习日志 --css层叠样式表相关推荐

css3学习之 css选择器(结构性伪类选择器)
同上篇:先说明下本机浏览器吧:opera 10 firefox 4.0 chrome 由于是公司机器xp的..所以ie版本为 ie8 另外有一个ietest 所谓伪元素选择器,是指并不是针对真正的元 ...
css3学习之 css选择器(css3 属性选择器)
这是上一篇css选择器介绍里面内容比较详细..大家可以看看下面我将结合<HTML 5与css 3权威指南>这本书对css选择器再进行记录下里面有些个人见解如果看客觉得有问题.可以提出 ...
前端HTML5+CSS3学习笔记
HTML5+CSS3学习笔记 ==CSS第一天== 一.css简介二.css语法规范三.css代码风格四.css选择器的作用五.css基础选择器 1.标签选择器: 2.类选择器 3.多类名选择 ...
CSS层叠样式表Cascading Style Sheets(2021.10.05)
一.CSS简介 1.优缺点优点:丰富的样式描述: 样式和结构的分离,便于维护和管理: 减少代码量,加快页面加载: 样式代码复用性强: 多个页面可以使用同一个CSS代码: 缺点:浏览器对CSS支持程度 ...
狂神css3笔记,【CSS】CSS3学习笔记（一）——选择器
✨CSS 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不 ...
css层叠样式表基础学习笔记--第一章 css简介及引入
第一章 css简介及引入 1-01 css简介 1-02 css优缺点 1-03 css书写格式 1-04 css引入格式行内样式内部样式外部样式导入样式 1-05 css注释 1-01 cs ...
Java学习-14 CSS与CSS3美化页面及网页布局
Java学习-14 CSS与CSS3美化页面及网页布局 1. CSS简介什么是CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示控制 HTML 元素, ...
3-Javaweb学习-CSS层叠样式表
3-Javaweb学习-CSS层叠样式表 1.CSS(Cascading Style Sheet):层叠样式表 (1)作用: ①美化界面 ②在一定制度上解决了浏览器兼容性的问题 (2)选择器 ...
html css布局慕课,html5和css3学习 Header实现CSS的布局
我们在手机上布局一般是这个样子的: 其中头部对整个mobile的设计至关重要,而且坑也很多: ① 一般来说整个header是以fixed布局,fixed这个产物在移动端来说本身坑就非常多 ② 在Hyb ...

Css3学习日志 --css层叠样式表