CSS的定义
HTML和CSS的关系
HTML 结构层 负责从语义的角度搭建页面结构
CSS 样式层 负责从 审美的角度美化页
JavaScript 行为层 负责从 交互的角度提升用户体验
CSS语法
-语法结构:
选择器{属性:值;属性:值;…….}
-选择器:选择谁
参数说明:属性和属性值之间用冒号(:)隔开,定义多个属性时,属性之间用英文输入法下的分号;隔开。
选择器:
实现CSS对HTML页面样式的控制,如果要让这些样式对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器,HTML页面中的元素就是通过CSS选择器进行控制的。
如何编写CSS
如何编写CSS样式?
标签选择器
CSS简单属性
类选择器(class)
使用方法:
第一步:使用合适的标签把要修饰的内容标记起来,如下:
<span>Web开发</span>
第二步:使用class="类选择器名称"为标签设置一个类,如下:
<spanclass="one">Web开发</span>
第三步:设置类选器css样式,如下:
.one{color:red;}
类选择器(class)多类选择器
一个标签可以有多个类选择器的值,不同的值用空格分开,如:
<divclass="one yellow leftStyle">此处为标签内的文字</div>
这样我们可以将多个样式用到同一个标签中
页面布局常见命名规范
头 | header |
内容 | content/container |
尾 | footer |
导航 | nav |
侧栏 | sidebar |
标志 | logo |
广告 | banner |
页面主体 | main |
内容 | content |
命名:最好不用汉字,html标签去定义一个类名。 不能用数字开头
在名称内部可以出现特殊符号例如:下横线 _ 中横线-
ID选择器
ID选择器和类选择器用法一样,区别是同一个HTML页面中不能有相同的ID名称(使用多个相同的ID选择器,浏览器不会报错但是不符合W3C标准了,所以ID选择器命名必须要唯一性)
ID选择器以"#" 来定义。如图:
ID选择器与类选择器的区别
1:类选择器: 好比人的名字 刘德华 可以多人使用
2:id 选择器 好比人的身份证 唯一性 有且只能使用一次
3:不同于类选择器,ID 选择器不能结合使用
写样式的时候,大部分都是用类,极少的使用id。不提倡用id 去写样式,因为他的权重太高。 Id 主要是为了js做准备。
通配符选择器
通配符选择器用“*”号表示,他是所有选择器中作用范围最广的,能匹配页面中所有的元素。其基本语法格式如下:
*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
例如下面的代码,使用通配符选择器定义CSS样式,设置所有HTML标记字体大小
Css相关属性
Text-align | Center,left,right | 文字居中格式 |
Font-size | 18px | 设置文字大小 |
Font-family | 微软雅黑,宋体 | 设置字体 |
Font-weight | Normal默认,bold粗体,100px | 设置字体加粗 |
Font-style | Normal默认,italic斜体 | 设置字体风格 |
Color | 颜色 | 设置文字颜色 |
Css字体合写
字体合写语法格式如下
注意:必须有 字体大小和字体 (font-size 和font-family), 必须严格按顺序写
css复合选择器
css复合选择器-标签指定式
1、标签指定式选择器(即....又....)
标签指定式选择器又称交集选择器,由两个选择器构成,其中第一个为标记选择器,第二个为class选择器或id选择器,两个选择器之间不能有空格,如
h3.special或p#one。
后代选择器
后代选择器(包含选择器)
后代选择器用来选择元素或元素组的后代,其写法就是把外层标记写在前面,内层标记写在后面,中间用空格分隔。当标记发生嵌套时,内层标记就成为外层标记的后代。
并集选择器
3、并集选择器
并集选择器是各个选择器通过逗号连接而成的,任何形式的选择器(包括标记选择器、class类选择器id选择器等),都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为它们定义相同的CSS样式。
综合小练习
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>综合案例演示</title>
<style type="text/css">
.box{
width: 800px;
height: 200px;
margin: 0 auto;
}
.title{
text-align: center;
/*font-family: "微软雅黑";*/
/*font-style: normal;*/
/*font-size: 28px;*/
font:normal 28px "微软雅黑";
}
.subtitle{
text-align: center;
}
.subtitle .time{
color: #aabbcc;
font-size: 14px;
/*background-color: yellow;*/
}
.subtitle .news_title{
color: #990000;
font-size: 14px;
/*background-color: pink;*/
}
p{
text-indent: 2em;
line-height: 28px;
}
p span{
color: #3399cc;
}
input[type="button"]{
color: green;
font-size: 12px;
}
input[type="text"]{
color: red;
font-size: 14px;
}
a{
font-size: 14px;
}
</style>
</head>
<body>
<div class="box">
<h2 class="title">中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h2>
<div class="subtitle">
<span class="time">2014年07月16日20:11</span>
<span class="news_title">新浪体育 评论中大奖(11人参与)</span>
<a href="#" >收藏文本</a>
<input type="text" placeholder="请输入查询条件">
<input type="button" value="搜索"/>
</div>
<hr>
<p>新浪体育讯 7月16日是燕京啤酒<span>[微博]</span>2014中国足协杯第三轮比赛,丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午,丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈,并且收拾行囊准备离开。在这样的情况下,丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。</p>
<p>在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会,当时俱乐部给出的解释是李虎由于身体欠佳,去医院接受治疗。然而今日李虎出现在俱乐部时,向记者否认了这一说法,并且坦言已经向俱乐部提出了辞呈。</p>
<p>据记者多方了解的情况,李虎<span>[微博]</span>极其教练组近来在执教成绩上承受了不小的压力,在联赛间歇期期间,教练组曾向俱乐部提出能够多引进有实力的球员补强球队,然而由于和俱乐部在投入以及成绩指标上的分歧,李虎最终和教练组一起在比赛日辞职。</p>
<p>这样的情况并没有影响到丽江嘉云昊队<span>[微博]</span>的队员,在比赛中丽江队在主场拼的非常凶,在暴雨之中仍然发挥出了体能充沛的优势,最终凭借点球击败了中超球队哈尔滨毅腾,顺利晋级下一轮比赛。<strong>根据中国足协杯的赛程,丽江嘉云昊队将在本月23日迎战江苏舜天队。</strong></p>
</div>
</body>
</html>