css入门
2016-04-02 20:26
706 查看
CSS
一、 CSS概述
1、CSS是什么?
* CSS 指层叠样式表2、CSS有什么作用?
*CSS就是用来修饰HTML3、CSS代码规范
选择器名称 { 属性名:属性值;属性名:属性值;…….}属性与属性之间用 分号 隔开
属性与属性值直接按用 冒号 连接
如果一个属性有多个值的话,那么多个值用 空格 隔开。例如: border:5px solid red;
注释:/* 注释内容*/
二、CSS选择器(重点)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html>
<head>
<title>demo1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<!-- style="font-size: 200px" 这是css -->
<body>
This is my HTML page.<font size="5" color="blue" style="font-size: 200px;">我是小明</font> <br>
</body>
</html>
*CSS选择器:指定了CSS样式作用于哪个HTML标签上
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>demo1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
font {
/* html */
font-size: 10px;
color: red;
}
p {
}
</style>
</head>
<body>
This is my HTML page.<font>我是小明</font> <br>
<p>aaaa</p>
</body>
</html>
1、基本选择器
l HTML标签选择器(优先级最低)*就是把HTML标签名作为选择器名称
*格式: 标签名 {}
l 类选择器
*样式格式: .class名{}
*标签格式: <p class=”class名”></p>
*能设置不同标签的相同样式
l Id选择器(优先级最高)
*样式格式: #id名{}
*标签格式:<p id=”id名”></p>
*有针对性地设置样式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>css基本选择器.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
font {
/* html */
font-size: 10px;
color: red;
}
/* html标签选择器 */
p {
font-size: 10px;
color: blue;
}
/* 类选择器*/
.xxxx {
font-size: 10px;
color: green;
}
/* id选择器*/
#ddd {
font-size: 100px;
color: blue;
}}
</style>
</head>
<body>
<p>我是hadoop </p><br/>
<h1 class="xxxx">ffffffff</h1>
<h2 id="ddd">id</h2>
<font>aaa</font><br/>
<font>a</font><br/>
<font>aa</font><br/>
<font>aa</font><br/>
</body>
</html>
2、扩展选择器
l 关系选择器*两个或者多个选择器间存在关系
*格式:选择器1 选择器2 {}
*适用于标签嵌套
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>demo1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
p {
font-size: 10px;
color: red;
}
p font{
color: blue;
}
</style>
</head>
<!-- style="font-size: 200px" 这是css -->
<body>
<p class="haha">我是 <font >liangxiaoming</font></p>
</body>
</html>
l 组合选择器
*格式:选择器1,选择器2{}
*适用于多个不同标签设置相同样式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>demo1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
/* 组合选择器*/
p,font {
font-size: 10px;
color: red;
}
</style>
</head>
<body>
<p>aaaaaaaaa</p>
<font>aaaaaaaaa</font>
</body>
</html>
l 伪元素选择器
*HTML预定义的选择器
*格式:标签名:选择器{}
*选择器名称为 HTML标签的状态。例如:a:link{}表示链接标签在未访问过 时的样式。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>demo1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
a:LINK {
color: yellow;
}
a:VISITED {
color: black;
}
</style>
</head>
<body>
<a href="#">ddd</a>
</body>
</html>
三、HTML与CSS的结合方式
*CSS必须结合HTML来用。*4种使用方式:
A、style属性方式(内联样式)
*适合局部修改*<font style="font-size:150px;color: red;">今天天气好晴朗</font>
B、style标签方式:(内嵌样式)
*<style></style> 存在于head标签之中的*例如:<style type="text/css">
font {
font-size:150px;color: red;
}
</style>
*页面的多个标签统一设置。
C、导入方式(外部样式中使用较少)
*格式:@import url("CSS文件路径");*存在于<style>标签中
D、链接方式(外部样式最常用的方式)
*格式:<link rel="stylesheet" type="text/css" href="CSS文件路径"/>*存在于<head>标签中
外部样式好处:
提升了代码的复用性,更加易于维护,从而极大提高工作效率
样式优先级:
内联样式》》内嵌样式》》外部样式(就近原则)
链接方式和导入方式区别:
1、链接方式引用的CSS会被同时加载。而导入方式引入的CSS在页面全部加载完以后才会加载,在网速较慢时会出现网页没有样式的情况。(导入方式硬伤)
2、链接方式支持JavaScript修改样式,而导入方式不支持(导入方式硬伤)
3、链接方式可以引入样式也可以做其他事情。而导入方式只能引CSS
4、链接方式导入的CSS任何浏览器都OK,而导入方式要求浏览器版本必须在IE5以上
建议使用链接方式
四、CSS布局(了解)
l 盒子模型(了解会用)在进行布局前需要把数据封装到一块一块的区域内,这个区域的专业术语叫盒子。
边框(border)分为上 下 左 右。用于设置盒子边框
内边距(padding)分为上 下 左 右。用于设置元素在盒子内的位置。
外边距(margin)分为上 下 左 右。用于设置盒子的位置
l 漂浮属性(简单了解)
float
l 定位属性(简单了解)
position
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- Apple官网研究之使用Justify布局导航
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 欲练CSS ,必先解决IE的一些细节分析
- CSS文字截取功能实现代码