css基础01

时间：2016年5月16号

前三天，HTML5的基础已经完结。网页中涉及的样式就跟我们今天学习的css有关。首先，在HTML的基础上再来学习css的样式，总是觉得要轻松很多，但是总是存在记忆的问题，且不说css的样式多而杂，就连属性也有一大堆，这样的大规模强制性接受和记忆并非可能。但是，总归一点，多练多些，孰能生巧。
首先，今天的内容分几大块。我们先来看看css的基本概述；
一、CSS概述：
.CSS 的作⽤
• 什么是 CSS
• CSS 与 HTML 之间的关系
• HTML 属性与 CSS 样式的使⽤用原则
使用css样式表
• 使⽤用 CSS 样式表的⽅方式
• 内联⽅方式使⽤用 CSS
• 内部样式表
• 外部样式表
二、具体讲解css
a、 CSS 的作⽤
i 查看如下代码
<body bgcolor="silver" text="blue">
<h2>h2 text</h2>
<hr color="red" />
Some text here. </body>
注意： 如果使⽤用 HTML 标记中的属性来定义样式，各元素对于样式的属性定义各不相同！
其显示的结果是h2 text和some text here字体颜色均为蓝色，body的背景颜色是银色，hr为分割线，其颜色为红色。
ii.查看如下代码
<html>
<head>
<style type="text/css"> body {
background-color:silver; color:blue; }
h2 {
background-color:orange; color:green;
}
hr { color:red; }
</style>
</head>
上述代码中要注意元素选择的css样式style是写在<heade></head>之间的。根据上述的css样式，body中的相应的标签会被设置样式。

b、什么是 CSS
• CSS（Cascading Style Sheets）：层叠样式表，⼜又叫级联样式表，简称样式表
• 用于 HTML ⽂文档中元素的样式定义 – 实现了将内容与表现分离 – 提⾼高代码的可重⽤用性和可维护性
CSS 与 HTML 之间的关系 • HTML ⽤用于构建⺴⽹网⻚页的结构 • CSS ⽤用于构建 HTML 元素的样式 • HTML 是⻚页⾯面的内容组成，CSS 是⻚页⾯面的表现
HTML 属性与 CSS 样式的使⽤用原则 • W3C 建议尽量使⽤用 CSS 样式取代 HTML 属性 – 实现内容和表现的分离 – 如果为 HTML 所特有的属性，则使⽤用 HTML 属性

345.png

c 、HTML 属性与 CSS 样式的使⽤用原则
• W3C 建议尽量使⽤用 CSS 样式取代 HTML 属性 – 实现内容和表现的分离 – 如果为 HTML 所特有的属性，则使⽤用 HTML 属性
三、引入css的三种方式：
1、标签内引用，style=“样式名：样式值；...”
2、内部引用
3、外部引用
其中标签内引用的优先级别最高。外部引用和内部引用的优先级别是一样的。
具体引用方式如下：
i 内联⽅方式使⽤用 CSS
• 样式定义在 HTML 元素的标准属性 style ⾥里
• CSS 语法
– 只需要将分号隔开的⼀一个或者多个属性/值对作为元素的 style 属性的值 – 属性和属性值之间⽤用：连接
– 多对属性之间⽤用；隔开

如下：
<h1 style =“background-color : silver ; color : blue ;”> ⽂文本 </h1>
•
ii 知 识 讲 解
内部样式表
• 样式表规则位于⽂文档头元素中的 <style> 元素内

– 在⽂文档的 <head> 元素内添加 <style> 元素

– 在 <style> 元素中添加样式规则
<html>
<head>
<style type="text/css">
h1 { color : blue ; }
</style> </head>
<body>
<h1>文本1</h1>
<h1>文本2</h1>
</body> </html>

•可以在当前⻚页⾯面范围内重⽤用
•知 识 讲 解
内部样式表（续1）
• 在 <style> 元素中添加样式规则 – 可以定义多个样式规则 – 每个样式规则有两个部分：选择器和样式声明
• 选择器：决定哪些元素使⽤用这些规则
• 样式声明：⼀一对⼤大括号，包含⼀一个或者多个属性/值对
外部样式引用和内部引用差不多，唯一的区别就是：内部引用是在style里面引用，而外部引用则是新建一个css的文档实行外部引用。
外部引用写法如下：
<html>
<head>
<link rel="stylesheet" type="text/css" href="myStyle.css" />
</head>
<body>
<h1>1号标题</h1>
<p>段落</p>
<span>其他⽂文本</span> </body>
</html>

四、css语法
i CSS 语法规范
. CSS 语法规范总结
• CSS 样式表特征
• 样式优先级
• !important 规则
ii css选择器
• 元素选择器
• 类选择题
• id 选择器
• 群组选择器
• 后代选择器
• 伪类选择器
• 通⽤用选择器
• ⼦子代选择器
• 选择器优先级

a、CSS 语法规范总结 • 内联样式：由样式声明组成
<h1 style=“background-color:silver;color:blue;”>文本</h1>
• 样式表（内部样式表或者外部样式表） – 由多个样式规则组成 – 每个样式规则有两个部分：选择器和样式声明
b、CSS 样式表特征
• 继承性 、
– ⼤大多数 CSS 的样式规则可以被继承
• 层叠性
– 可以定义多个样式 – 不冲突时，多个样式表中的样式可层叠为⼀一个
• 优先级
– 样式定义冲突时，按照不同样式规则的优先级来应⽤用样式
样式优先级
• 浏览器缺省设置
• 外部样式表或者内部样式表 – 就近优先
• 内联样式
注意：相同的样式，如果重复定义，以最后一次的定义为准
iii
!important 规则
• !important 可以调整样式规则的优先级
• 将 !important 添加在样式规则之后，中间⽤用空格隔开
– 选择器 {属性 : 属性值 !important; }
• 谨慎使⽤
在<html>文档中：
<p class="s1">段落⽂文本</p>
在样式表中：
<style type="text/css">
p.s1 { color:Red;}
p.s1 { color:Green;}
</style>

iiii CSS 基础选择器
a、通⽤用选择器
• 通⽤用选择器，显⽰示为⼀一个星号（*）
– 可以与任何元素匹配 – 常⽤用于设置一些默认样式，⽐比如设置整个⽂文档的⽂文本的默 认字体和⼤大⼩小

  • {
    font-size : 9pt; font-family : "Times New Roman";
    }

b、元素选择器
• html ⽂文档的元素就是选择器
– 比如 <p>、<h1> 等
html { color : black ; }
h1 { color : blue ; }
h2 { color : silver ; }

c、类选择器
• 语法为：
.className { color:red;}
– 类名称不能以数字开头
• 所有能够附带class属性的元素都可以使⽤用此样式声明
– 将元素的 class属性的值设置为样式类名
• 样式表中：声明⼀一个样式类
.myClass
{
background-color : Pink; font-size : 35pt;
}
• html ⽂文档中：将元素的 class 属性的 值设置为样式类的名称
<h2 class="myClass">h2⽂文本</h2>
<p class="myClass">段落⽂文本</p>

类选择器（续1）
• 可以将多个类选择器应⽤用于同一个元素（多类选择器）
– HTML 元素的 class 属性的值中可能包含一个词列表 – 各个词之间⽤用空格分隔，每个词都是一个类选择器
• 样式表中：声明两个样式类
.important
{
font-weight : bold;
}
.warning
{
color : red;
}
• html ⽂文档中：将元素的 class 属性的 值设置为多个样式类名的列表 <p class="warning">警告</p> <p class="important">重要</p> <p class="important warning">哈哈</p>
其结果显示为“警告”和“哈哈”是红色而且宽度增加，而“重要”是黑色。

类选择器（续2）
• 可以将类选择器和元素选择器结合起来使⽤用，以实现对某 种元素中不同样式的细分控制（分类选择器）
• 语法为：元素选择器
.className { }
– 先声明一个元素选择器
– 然后使⽤用⼀一个点号（.）代表将使⽤用类选择器
– 然后声明一个类的名称
– 最后使⽤用⼀对⼤大括号声明样式规则
• 将样式规则与附带 class 属性的某种元素匹配
– 元素的 class 属性的值为分类选择器中指定的样式类名

例子：
• 样式表中：定义⼀一个分类选择器
p.important
{
color : red ;
font-size : 20pt;
border:1px solid black;
}

• html ⽂文档中：将元素的 class 属性的值设置为样式类的名称
<h2 class="important">h2⽂文本</h2>
<p class="important">段落⽂文本</p>
结果会发现只有<p>元素使用了样式，如果要h2也使用样式，那么可以这样在样式表中这样写：
h2，p.important
{
color : red ;
font-size : 20pt;
border:1px solid black;
}
既可以实现h2 也使用了样式。

d、id 选择器
• id 选择器以一种独⽴立于⽂文档元素的⽅方式来指定样式
• 它仅作⽤用于 id 属性的值
• 语法为：
– 选择器前⾯面需要有一个 # 号
– 选择器本⾝身则为⽂文档中某个元素的 id 属性的值
例子如下：
• 样式表中：定义⼀一个 id 选择器

mostImportant

{
color:red;
background:yellow;
}

• html ⽂文档中：将元素的 id 属性的值设置为选择器的名称
<h1 id="mostImportant">This is important!</h1>
<h1 >This is important!</h1>
结果显示为：第一个This is important!背景变成了黄色。这就是后面所说的群组选择器

e、群组选择器
• 选择器声明为以逗号隔开的选择器列表
– 将⼀一些相同的规则作⽤用于多个元素
样式表中：定义选择器分组
h2, p.important { color:green; font-size:20pt; border:1px solid red;

•html ⽂文档中：
<p class="important">p text</p>
<h2>h2 text</h2>

f、后代选择器
• 依据元素在其位置的上下⽂文关系来定义样式
• ⼜又称为包含选择器，⽤用于选择作为某元素后代的元素
– 选择器一端包括两个或多个⽤用空格分隔的选择器
• 样式表中：
定义派⽣生选择器
h1 span { color:red; }
• html ⽂文档中：
<h1> An<span>important</span> question. </h1> <span>other</span>
最后会发现 只有 <h1> 元素中的 <span> 元 素中的⽂文本使⽤用该样式

g、伪类选择器
• 伪类⽤用于向某些选择器添加特殊的效果
• 使⽤用冒号(:)作为结合符，结合符左边是其他选择器，右边 是伪类 – 选择器 : 伪类选择器
• CSS 伪类选择器可以分为
– 链接伪类
– 动态伪类
– 目标伪类
– 元素状态伪类
– 结构伪类
– 否定伪类
伪类选择器（续1）
• 链接伪类
– : link ，适⽤用于尚未访问的链接 – : visited ，适⽤用于访问过的链接
• 动态伪类，⽤用于呈现⽤用户操作 – :hover，适⽤用于⿏鼠标悬停在 HTML 元素时
– :active，适⽤用于 HTML 元素被激活时
– :focus，适⽤用于 HTML 元素获取焦点时

注意：顺序一定不能改 伪类选择器优先级比类选择器高

例子：
a:link
{
color: black;
font-size:15pt;
}
a:visited
{
color: pink;
font-size:15pt;
}
a:hover
{
font-size : 20pt;
}
a:active
{
color : red;
}

h、优先级别


youxianji.png

五、尺寸与边框
i css单位
——尺寸单位
——颜色单位
ii 尺寸属性
——尺寸
——溢出
——哪些HTML元素可以设置尺寸属性
iii 边框属性
——边框
——边框倒角
——边框阴影
——图片边框
——轮廓
A、css单位
%，in英寸，cm，mm，pt，px，em
B、颜色单位
.rgb取值范围0~255（red，green，blue）
.rbga a代表透明度，取值0~1.
.rgb有两种表示方式（255，0，0）（50%，50%，50%）
• #rrggbb：⼗十六进制数，如#ff0000 • #rgb：简写的⼗十六进制数，如#f00 • 表⽰示颜⾊色的英⽂文单词，如 red

C、尺⼨
• 尺⼨寸属性是⽤用于设置元素的宽度和⾼高度
– 单位一般为像素或百分⽐比
• 宽度属性
– width
– max-width
– min-width
• ⾼高度属性
– height
– max-height
– min-height

D、溢出
• 使⽤用尺⼨寸属性控制框的⼤大⼩小时，如果内容所需的空间⼤大于 框本⾝身的空间，会导致内容溢出
• overflow：当内容溢出元素框时如何处理
– visible （默认的）
– hidden（隐藏的）
– scroll （溢出滚动条）
– auto （超出滚动条）
• overflow-x
• overflow-y

E、哪些 HTML 元素可以设置尺⼨寸属性
• 块级对象，
如
– p,
– div
– h1,h2,h3,h4,h5,h6
– ul,ol,li,dl,dt,dd等
• 存在width、height属性的 HTML 元素 – img
– table 等

F、边框
• 简写⽅方式 – border:width style color;
• 单边定义 – border-left/right/top/bottom:width style color;
• border-width – border_left/right/top/bottom-width
• border-style – border-left/right/top/bottom-style
• border-color – border-left/right/top/bottom-color
注意：•边框颜⾊色，可设置为值 transparent（⽤用于创建有宽度的不可⻅见边框）

G、边框倒⾓角
• border-radius 属性
– 为简写属性，按顺时针顺序设置四个倒⾓角
– 取值为绝对值或者百分⽐比
• 单独定义
– border-top-left-radius：边框左上⾓角
– border-top-right-radius：边框右上⾓角
– border-bottom-left-radius：边框左下⾓角
– border-bottom-right-radius：边框右下⾓角

H、边框阴影
• box-shadow：向⽅方框添加⼀一个或多个阴影
– 取值为多个属性值的列表
• box-shadow: h-shadow v-shadow blur spread color inset;
• 其中
– h-shadow：必需，为水平阴影的位置
– v-shadow：必需，为垂直阴影的位置
– blur：可选，为模糊距离
– spread：可选，为阴影的尺⼨寸
– color：可选，为阴影的颜⾊色
– inset：可选，将外部阴影 (outset) 改为内部阴影

图片边框
• border-image 属性：将图片规定为包围 div 元素的边框
– border-image: source width repeat;
• 也可以分别设置
– border-image-source：图⽚片的路径
– border-image-width：图⽚片边框的宽度
– border-image-repeat：图像边框是否应平铺(repeat)、铺满 (round)或拉伸(stretch)

轮廓
• 轮廓（outline）是绘制于元素周围的⼀一条线，位于边框边 缘的外围，可起到突出元素的作⽤用
• 简写⽅方式 – outline:color style width;
• outline-width：轮廓的宽度 • oultine-style：轮廓的样式
• outline-color：轮廓的颜⾊色

本次课程到此结束，相关参考：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css基础</title>
<style>
/子代选择器,直系子代，和后代选择器优先级别一致/
div>span{
color:blue;
}
/后代选择器，获取dic里面的所有span/
div span{
color:red;
}
/伪类选择器,最常用的是hover/
/link默认状态下/
.a{
background-color:black;
}
a:link{
background-color: red;
}
#a{
background-color: pink;
}
/a的链接被访问之后/
a:visited{
background-color: blue;
}
/鼠标悬浮的时候/
a:hover{
background-color: yellow;
}
/鼠标按压时/
a:active{
background-color: green;
}
a:focus{
background-color: gray;
}
input{
outline: 0;
}

/*伪类选择器可以使用其他选择器先获取对应标签*/
.txt{
    color: gray;
    font-size: 9pt;
}
.txt:focus{
    color: black;
    font-size: 11pt;
}

/*基本选择器的优先级，内联样式>id>伪类>类>标签名*/
a{
    color: blue;
}
#footer{
    width: 100px;
    height: 100px;
    /*a代表透明度,取值为0~1.
    */
    background-color: #30f;
}
#art {
    border-image: url("nihao/22.jpg") 50repeat; 
    /*border: solid 1px gray;
    /*大于半径默认去半径*/
    /*box-shadow: 10px 3px 5px 10px blue inset;
    border-radius:50px 40px 30px 20px;
    width:100px;
    height:100px;
    overflow:auto;*/

/* overflow处理溢出scrool内容溢出显示滚动条,，visible看得见的,默认的 hidden隐藏 ,auto内容超出才会显示滚动条/
}
/可以设置宽度的标签为快标签，img，table，行标签设置宽高需要装话为块标签，结构化标签都是块标签/
/边框样式重用solid，dotted，实现和虚线, transparent可以设置边框颜色，只是不显示边框*/
</style>
</head>
<body>
<div id="head">
<span>我是div里面的第一层span</span>
<p>我是<span>div里面的第二层span</p>
<a id="a" class="a" href="http://www.taobao.com">taobao</a>
</div>

<input class="txt" type="text" value="用户名"/>




<input class="txt" type="text" value="地址">

<input class="txt" type="button" value="cuixu"/>

<div id="footer"></div>
<p id="art">
匆匆那年我们究竟说了几遍再见之后在拖延，谁有没有爱过不是一场七情上面的雄辩。目视前方下巴抬高更漂亮，不就是女的vdjvndg 就看你发过苦难代名词 多加看不见很快乐地方看过看不了的可喜欢你的疯狂呐喊教科书的房价过快的上空飞过可视电话可是对方能体会就哦哦湿热建设规划开始给惊恐山谷接电话刚开始</p>
</body>
</html>

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,723评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,485评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,998评论 0赞 344
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,323评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,355评论 5赞 374
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,079评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,389评论 3赞 400
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,019评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,519评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,971评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,100评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,738评论 4赞 324
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,293评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,289评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,517评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,547评论 2赞 354
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,834评论 2赞 345

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,728评论 1赞 92
  • 关于CSS
    学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,029评论 0赞 1
  • FreeCodeCamp - HTML5 and CSS
    FreeCodeCamp - HTML5 and CSS 发现原来在另外一台电脑学 FreeCodeCamp 的时...
    付林恒阅读 9,340评论 2赞 17
  • DIV+CSS学习笔记总结篇
    转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    程序员poetry阅读 16,518评论 32赞 459
  • 薛定谔的猫
    任何事情都需要去尝试才知道结果是怎样的 人们总抱着希望 期待冷酷下藏着的爱意 这样痛苦才不至于把他们逼疯 但真相是...
    Epicurism鹿小斐阅读 506评论 0赞 0