web前端——css学习
2017-02-08 本文已影响107人
袋袋_Deken
问题
- 什么是css?
- 为什么会有css？
- css和HTML怎么样结合？
css (what)
这是W3School给的定义
W3school的定义
** 百度百科 **：
Cascading Style Sheets(层叠样式表缩写)。是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
css优点 （why）
主要为了弥补html的不足
- HTML的缺陷：
- 不能够适应多种设备
- 要求浏览器必须智能化足够庞大
- 数据和显示没有分开
- 功能不够强大
- CSS 优点：
1.使数据和显示分开
2.降低网络流量
3.使整个网站视觉效果一致
4.使开发效率提高了
具体实现（how）
首先看整个的思维导图
整个需要了解的几大方面
在了解了什么是css，之后最想了解的便是它是如何运用到html中去的。
格式：
标签选择器 { 属性名称：属性值} (中间以分号；隔开)
三种方式：
三种使用方式
- 外部样式表，需要在写在当前html文件之外的单独的一个文件以.css为扩展名的文件,具体实现如上图思维导图
- 内部样式表 , 一般写在<head>标签中，用<style>标签包裹
- 行级样式表，写在标签的内部，用" "引用
选择器
选择器记忆
选择器可总结为两大类：** 基本选择器 和扩展选择器**
基本选择器
基本选择器
基本选择器又分为：
1，标签选择器
2，类选择器
3，ID选择器
4，通用选择器
简单例子
<html>
<head>
<title>css基本选择器</title>
<style type="text/css">
/**通用选择器**/
*{
font-size:30px;
color:yellow;
}
/**基本选择器**/
p{ color:red;
font-family:幼圆;}
/**类选择器**/
.bluefont{
color:blue;
}
/**ID选择器**/
#id1{
color:green;
font-size:50px;
}
</style>
</head>
<body>
<p>这是写的第一个css样式标签</p>
<p>p的普通选择器标签</p>
<label class="bluefont">label的类选择器标签</label><br>
<i id="id1">i的ID选择器标签</i>
</body>
</html>
效果图
上述简单的例子有一些选择器冲突 ，所以就产生了优先级，另外还有属性互补原则。
选择器的优先级别
扩展选择器
基本分三类选择器：
1，组合选择器
2，关联选择器
3，伪类选择器
扩展选择器
Demo:
<html>
<head>
<title>css基本选择器</title>
<style type="text/css">
/** 组合选择器 **/
h1,h2,#one{
font-size:30px;
color:green;
}
/**关联选择器**/
h3 span p{
color:red;
}
/**伪类选择器
1，静态伪类
静态只能用于超链接
2，动态伪类
适用于各种标签
**/
a:link{color:red;}
a:visited{color:yellow;}
a:hover{color:#FF00FF}
a:active{color:green}
a.two:link{color:red}
a.two:visited{color:green}
a.two:hover{font-size:150%}
input:focus{background-color:#ff9999;
border:1px solid red;}
label:hover{color:green;}
/* 二者只能用一个*/
/**label:active{color:red;}**/
</style>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<label id="one">label的类选择器标签</label><br>
<h3><span><p>这是关联选择器里面的p标签</p></span></h3>
<p >这是不在关联选择器中的p标签</p>
<a href="01css.html">这是一个嵌入伪类选择器的超链接</a><br><br>
<a class="two" href="01css.html">这是一个class为two的伪类选择器的超链接</a><br><br>
请输入<input value="a"></input><br>
<label>你好，明天</label>
</body>
</html>
运行结果
运行结果
各种属性
这些属性其实就只需要记几个常用的就行了，不记得了，等要用的时候再查表
基本属性
文本属性
背景属性
字体文字属性
其他
至此，CSS的学习告一段落，基本都是从W3School那里学习得来，只不过自己用思维导图整理了一下，另外自己也实现了，有个印象，想提升则需要在项目中去历练。
