您的位置：首页 > Web前端 > CSS

web 学习笔记2-CSS

2017-03-15 22:47 405 查看
1、CSS的基本概念：

CSS：Cascading Style Sheet 层叠样式表
CSS 作用就是给HTML页面标签添加各种样式
为什么要用CSS呢？
HTML的缺陷：
1. 不能够适应多种设备
2. 要求浏览器必须智能化足够庞大
3. 数据和显示没有分开
4. 功能不够强大
例如每个样式都要在html中写一遍，很冗余，而且会增加传输的流量。

CSS 优点：
1.使数据和显示分开
2.降低网络流量
3.使整个网站视觉效果一致
4.使开发效率提高了


2、CSS基本语法：

p{color：red;}

选择器{属性名：属性值 ;}
注意：
选择器后一定是大括号.属性名后必须用冒号隔开.属性值后用分号
属性名和冒号之间最好不要有空格。


3、CSS和HTML的结合方式：

CSS代码理论上位置是任意的，但通常写在style标签里
CSS和HTML的结合方式有3种：
a. 行级样式表:采用style属性,范围只针对此标签适用
例如：
<div style = "border:1px solid red ;">大家好</div>
b. 内嵌样式表:采用<style>标签完成。范围针对此页面
c. 外部样式表: 采用建立样式表文件。针对多个页面.
引入样式表文件的方式:
1):采用<link>标签
例如:
<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
2):采用import，必须写在<style>标签中，并且必须是第一句
例如：
@import url(a.css) ;

两种引入方式的区别：
外部样式表中不能写<link>标签,但是可以写import语句

简单的示例：
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
<title>Document</title>
<style type="text/css">
/*
CSS和HTML的结合方式:
1. 行级样式表: 采用style属性完成
2. 内部样式表: 采用style标签完成
3. 外部样式表: 采用外部css文件完成
*/
p{
font-weight:bold;
font-style:italic;
}
</style>
</head>
<body>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p style = "color:red">你好</p>
</body>


4、CSS选择器-基本选择器：

a.标签选择器:指的就是选择器的名字代表html页面上的标签
p{
color:red ;
border:1px dashed green;
}

b.类选择器：规定用圆点.来定义
优点：灵活
例如:
.one{
background-color:#ff0099;
}

c. ID选择器：规定用#来定义
例如:
#one{
cursor:hand;
}

d:通用选择器： 用*定义,代表页面上的所有标签。
*{
font-size:30px;
margin-left:0px;
margin-top:0px;
}

这几个之间的区别：
标签选择器针对的是页面上的一类标签.
类选择器可以供多种标签使用.
ID选择器是值供特定的标签(一个). ID是此标签在此页面上的唯一标识。

简单的示例：
<head>
<style type="text/css">
/*
a. 标签选择器: 就是选择了页面上一类标签
b. 类选择器： 规定用圆点. 来定义
c. ID选择器:  规定用#来定义 : 正对特定的一个标签用
d. 通用选择器： 用*来定义
*/
p{
color:red;
}
*{
padding:0px;
margin:0px;
color:yellow;
}
.one{
border:1px solid red ;
}

#two{
border:3px dashed green ;
}
</style>
</head>
<body>
<div class = "one">你好</div>
<p>你好</p>
<h1 class = "one">你好</h1>
<h2 id = "two">你好</h2>
</body>

注意没有设置选择器就会使用通用的选择器。


5、CSS选择器-扩展选择器：

a. 组合选择器:采用逗号隔开。
例如: p,h1,h2,.one,#two{color:red ; }

b. 关联选择器(后代选择器): 采用空格隔开。
例如: h4 span i{color:red ; }
表示h4标签中的span标签中的i标签的样式
h4和span和i标签不一定是紧挨着的。

c. 伪类选择器。
1)静态伪类：规定是用:来定义.只有两个.只能用于超链接.
:link表示超链接点击之前的颜色
:visited表示链接点击之后的颜色

例如:
a:link{color:red ;}
a:visited{color:yellow;}
注意：
a:link{}定义的样式针对所有的写了href属性的超链接(不包括锚)
a{}定义的样式针对所有的超链接(包括锚)

2)动态伪类: 针对所有的标签都适用。
:hover : 是移动到某个标签上的时候
:focus : 是某个标签获得焦点的时候
:active : 点击某个标签没有放松鼠标时

例如:
label:hover{color:#00ff00; }
input:focus{
background-color:#ff9999;
border:1px solid red;
}
a:active{
color:blue;
}

简单的示例：
<style type="text/css">
div,p,h1,.one,#two{
border:5px double blue ;
}
h3 i   {
color:red ;
}
a:link{
color:red ;
}
a:visited{
color:yellow;
}
input:focus{
border:1px solid red ;
color:green ;
background-color:#ffcc99;
}
p:active{
color:blue;
}
label:hover{
cursor:hand;
}
table{
width:300px;
height:300px;
border:1px solid red ;
border-collapse:collapse;
}
table td{
border:1px solid red ;
}
table tr:hover{
background-color:#ffcc66;
}
</style>
<body>
<div>你好</div>
<p>你好</p>
<h1>你好</h1>

<h4 class = "one">你好</h4>
<h3>你好<b>你好<i>你好</i>你好</b>你好</h3><br>
<i>你好</i>
<a href = "" name = "">你好</a>
<input type="text" name="">
<label>你好</label>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>


6、CSS选择器-各种选择器的冲突：

CSS样式的冲突:
1.ID选择器 > 类选择器 > 标签选择器
2.行级样式表 > 内嵌样式表 > 外部样式表
3.外部样式表的ID选择器  > 内嵌样式表的标签选择器

原则：就近原则
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航