CSSBasic Day01
2017-01-22 17:40:15 0 举报AI智能生成
在CSS基础课程的第一天，我们将开始探索和理解CSS的基本概念。我们将学习如何有效地使用CSS来设计和布局网页。我们将讨论如何使用内联样式、内部样式表和外部样式表，以及它们各自的优缺点。我们还将深入研究选择器的概念，包括元素选择器、类选择器和ID选择器，以及如何使用它们来定位和样式化我们的HTML元素。此外，我们还将了解一些基本的布局技术，如盒模型、浮动和定位。最后，我们将通过实践项目来巩固这些知识，以便更好地理解和应用我们在课程中学到的内容。无论你是初学者还是有一定经验的开发者，这个课程都将为你提供一个坚实的CSS基础。
作者其他创作
大纲/内容
CSS语法
CSS样式表的使用方式
内联方式
将样式定义在元素的style属性里
语法
<ANY style="样式声明;样式声明;">
样式声明
属性名:属性值
特点
只针对一个元素有效
不通用，无法提高可重用性和可维护性
<p style="color:red;backgrond-color:yellow;"></p>
内部样式表
将样式定义在页面<style></style>中
<head>
<style></style>
</head>
<style></style>中允许包含若干样式规则
样式规则
选择器
规范页面中哪些元素能够使用定义好的样式
匹配页面元素
样式声明
属性:值
特点
在一个页面中能够提升可重用性和可维护性
外部样式表
允许将样式定义在外部的的样式表文件中
步骤
创建一个单独的样式表文件用来保存样式规则
纯文本文件，文件后缀为.css
该文件中只能包含样式规则
样式规则由选择器和样式声明组成
在需要使用该样式表文件的页面上，使用<link>元素链接外部样式表文件
<link rel="stylesheet" type="text/css" href="css样式表URL">
CSS样式表特征
继承性
大多数CSS的样式属性是可以被继承的
层叠性
可以为一个元素定义多个样式规则
样式属性不冲突时，多个样式表中的样式可以层叠为一个
优先级
样式定义冲突时，会按照不同使用方式的优先级来应用样式
浏览器缺省设置
外部样式表和内部样式表
就近原则
内联样式
!important
可以显示的调整样式规则的优先级
语法
属性：值 !important;
注意
尽量少用
CSS基础选择器
通用选择器
作用
用于匹配页面上的每一个元素
可用于页面上所有元素的元素样式定义
语法
*{ }
元素选择器
作用
用于匹配页面上指定元素的标记
通常用于设定某一种元素的默认样式
语法
元素名称{ }
div{ }
p{ }
span{ }
类选择器
作用
可以由任意元素的class属性可以进行引用的选择器
在CSS中，类选择器是最灵活的选择器，应用也非常广
语法
定义
.className{}
.是定义类选择器的语法规范，并不是类选择器的名称
类名不能以数字作为开始
引用
<ANY class="className">
多类选择器的引用
允许一个元素引用多个类选择器
<ANY class="name1 name2 name3">
分类选择器的定义
作用
将类选择器和元素选择器结合起来使用
从而实现对某种元素中不同样式的细分控制
语法
元素选择器.类选择器{}
ex
p.important{ }
匹配页面中所有class为important的p元素
div.redColor{ }
ID选择器
作用
与页面指定ID值的元素进行匹配（私人定制）
语法
#idValue{}
#仅仅表示该选择器是ID选择器而已
群组选择器
作用
选择器声明有是以逗号隔开的选择器列表
可以将一部分样式相同的选择器放在一起定义
语法
选择器1，选择器2，选择器3{ }
后代选择器
作用
通过元素间的后代关系匹配元素
后代关系 ：出现在某元素的子元素（不限制层级）
语法
选择器1 选择器2{ }
子代选择器
作用
通过元素的子代关系匹配元素
子代关系：只存在一层子级关系的子元素
语法
选择器1>选择器2{ }
伪类选择器
作用
用于匹配元素不同状态的选择器
链接伪类
:link
适用于尚未访问的链接
:visited
适用于访问过的链接
动态伪类
:hover
适用于鼠标悬停在HTML元素时
:active
适用于HTML元素被激活时（一瞬间）
:focus
适用于HTML元素获取焦点时（光标闪动时）
……
选择器优先级
权值
元素选择器
1
类选择器
10
伪类选择器
10
ID选择器
100
内联样式
1000
选择器的权值加到一起，大的优先;如果权值相同，后定义的优先
CSS概述
什么是CSS
Cascading Style Sheets
层叠样式表，级联样式表，样式表
用于HTML文档中元素的样式定义
实现了内容与表现分离
提高代码的可重用性和可维护性
CSS与HTML之间的关系
HTML用于构建网页的结构
CSS用于构建HTML元素的样式
CSS与HTML之间的使用原则
W3C建议尽量使用CSS样式取代HTML属性
如果为HTML所特有属性，则使用HTML属性
尺寸与边框
单位
尺寸
%
in
cm
mm
pt
px
em
颜色（取值）
rgb(r,g,b)
rgb(r%,g%,b%)
#rrggbb
#rgb
颜色的英文表示法
尺寸
尺寸
作用
用于设置元素的宽度和高度
单位一般为像素或百分比
宽度
width
min-width
max-height
高度
height
min-height
max-height
允许设置尺寸的元素
块级元素
行内块元素（radio,checkbox除外）
具备width和height属性的HTML元素
溢出
当使用尺寸属性限制元素的大小时，如果内容所需的空间大于元素本身的话，就会导致内容溢出
属性
overflow
visible
hidden
scroll
auto
overflow-x
overflow-y
边框
边框
简写方式
border:width style color;
width:边框宽度
style:边框样式
solid
dotted
dashed
color:颜色
可取值为 transparent
单边定义
border-方向:width style color
方向
top
right
bottom
left
单属性定义
border-属性:值;
属性
width
style
color
单边单属性定义
border-方向-属性:值；
方向
top
right
bottom
left
属性
width
style
color
边框倒角
语法
属性
border-radius
取值
绝对值
百分比
单独定义
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
边框阴影
属性
box-shadow
h-shadow
必需，为水平阴影的位置
v-shadow
必需，为垂直阴影的位置
blur
可选，模糊距离
spread
可选，阴影的尺寸
color
可选，阴影的颜色
inset
将外部阴影(outset)改为内部阴影
边框轮廓
轮廓是绘制于元素周围的一条线，位于边框的外围
属性
outline:width style color
outline-width
轮廓的宽度
outline-style
轮廓的样式
outline-color
轮廓的颜色
0 条评论
下一页
