CSS的学习

来源：互联网发布：人力资源现状分析知乎编辑：程序博客网时间：2024/06/01 09:35

一、CSS 概述(了解)

*.CSS ：Cascading Style Sheet 层叠样式表

*.CSS ：作用就是给HTML页面标签添加各种样式

*.为什么用CSS

HTML的缺陷：1. 不能够适应多种设备

2. 要求浏览器必须智能化足够庞大

3. 数据和显示没有分开

4. 功能不够强大

CSS 优点：

1.使数据和显示分开

2.降低网络流量

3.使整个网站视觉效果一致

4.使开发效率提高了

二、CSS语法

p{color：red;}

选择器{属性名：属性值 ;}

选择器后一定是大括号。属性名后必须用冒号隔开。属性值后用分号。

属性名和冒号之间最好不要有空格。

三、CSS和HTML的结合方式

CSS代码理论上位置是任意的，但通常写在style标签里

CSS和HTML的结合方式有3种：</head>前

a. 行级样式表：采用style属性,范围只针对此标签适用 <p style="color:red">你好</p>

<div style = "border:1px solid red ;">大家好</div>

b. 内嵌样式表：采用<style>标签完成。范围针对此页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Document</title></head><style type="text/css">p{font-weight:bold;font-style:italic;}</style><body><p>你好</p><p>你好</p><p>你好</p><p>你好</p></body></html>

c. 外部样式表: 采用建立样式表文件。针对多个页面。

引入样式表文件的方式：<title>前

1):采用<link>标签

eg:<link rel = "stylesheet" type = "text/css" href = "a.css"></link>

2):采用import，必须写在<style>标签中，并且必须是第一句

eg: @import url(a.css) ;

两种引入方式的区别：

外部样式表中不能写<link>标签,但是可以写import语句

四、CSS选择器

选择器分为两大类:

1.基本选择器

a.标签选择器：指的就是选择器的名字代表html页面上的标签选择了页面上的一类标签

p{

color:red ;

border:1px dashed green;

}

p{border:1px dashed green;}<p>啦啦啦</p>

b.类选择器：规定用圆点.来定义

优点：灵活

eg: .one{background-color:#ff0099; }
.one{border:1px dashed red;}<div class="one">萌萌哒</div>

c. ID选择器：规定用#来定义

eg: #one{cursor:hand; }
#two{border:1px solid blue;}<div id="two">萌萌哒</div>
区别：标签选择器针对的是页面上的一类标签.

类选择器可以供多种标签使用.

ID选择器是值供特定的标签(一个). ID是此标签在此页面上的唯一标识。

d:通用选择器：用*定义,代表页面上的所有标签。

*{

font-size:30px;

margin-left:0px;

margin-top:0px;

}
通常用来去掉浏览器自己添加的margin pandding等，方便页面布局

基本选择器示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">.one{border:1px dashed red;}p{border:1px dashed green;}#two{border:1px solid blue;}*{padding:0px;margin:0px;color:#00FF00;}</style></head><body><div class="one">萌萌哒</div><div>萌萌哒</div><div>萌萌哒</div><div id="two">萌萌哒</div><p>啦啦啦</p></body></html>

2.扩展选择器

a. 组合选择器:采用逗号隔开

eg: p,h1,h2,.one,#two{color:red ; }

b. 关联选择器(后代选择器): 采用空格隔开

eg: h4 span i{color:red ; }

表示h4标签中的span标签中的i标签的样式

h4和span和i标签不一定是紧挨着的。

c. 伪类选择器

1) :静态伪类：规定是用:来定义.只有两个.只能用于超链接.

:link表示超链接点击之前的颜色

:visited表示链接点击之后的颜色

eg:a:link{color:red ;}

a:visited{color:yellow;}

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

a{}定义的样式针对所有的超链接(包括锚)

2) :动态伪类 : 针对所有的标签都适用

:hover : 是移动到某个标签上的时候

:focus : 是某个标签获得焦点的时候

:active : 点击某个标签没有放松鼠标时

eg: label:hover{color:#00ff00; }

input:focus{

background-color:#ff9999;

border:1px solid red;

}

a:active{

color:blue;

}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>扩展选择器</title><style type="text/css">div,p,h1,.one,#two{border:2px double blue;}h3 i .one{color:red;}a:link{color:red;}a:visited{color:blue;} input:focus{border:2px solid #6633CC;color:#33FF00;background-color:#6633FF;}p:active{color:#FF0066;}label:hover{cursor:crosshair;}table{width:300px;height:300px;border:2px solid red;border-collapse:collapse;}td{border:2px solid blue;}tr:hover{background-color:green;}</style></head><body><div>你好</div><p>刘德华</p><h1>成龙</h1><h4 class="one">林志玲</h4><h3>北京<b>传智<i>播<sup class="one">客</sup></i>黑马</b>训练营</h3><i>北京</i><br /><a href="02-css的基本选择器.html" name="b">网易</a><br /><a href="#b">啦啦啦</a><br /><input type="text" /><br /><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></html>

五、CSS各种选择器的冲突(掌握)

CSS样式的冲突:

1.ID选择器 > 类选择器 > 标签选择器（无论写在内外）
2.行级样式表 > 内嵌样式表 > 外部样式表

外部样式表的ID选择器 > 内嵌样式表的标签选择器

原则：就近原则，外部样式表指引入位置，内部指定义位置

引入多个类标签 <h2 class="one two">哈哈</h2> 用空格隔开

六、CSS的各种属性(掌握)

? CSS中尺度单位的介绍 CSS必须写单位！！！！html默认一种单位：像素

CSS的单位:

a. 绝对单位 1in=2.54cm=25.4mm=72pt=6pc , pt是点或者磅，pc是派卡

b. 相对单位：px, em(印刷单位相当于12个点), %(相对周围的文字) 后面的

1、*字体设置

p{

font-size:50px; /*字体大小*/

font-style:italic ; /*斜体*/

font-weight:bold; /*粗体*/

font-family:幼圆,华文彩云; /*字体类型*/ 逗号隔开，一个一个找是否支持

font-variant:small-caps; /*小写变大写*/

}

font是总的。例如font:30px 华文彩云;

2、*文本设置

p{

letter-spacing:0.5cm ; /*字母间距*/

word-spacing:1cm; /*单词间距*/

text-align:center; /*在所包含容器的中间*/

text-decoration:overline; /*字体修饰 underline下划线 line-through中划线 overline上划线*/

text-transform:lowercase; /*单词字体大小写*/ 每个单词的首字母大写 capitalize

color:red ;

}

3、*背景设置

body{

background-color:#ff99ff ; /*背景颜色*/

background-image:url(images/2.gif) ; /*背景图片*/

background-repeat: no-repeat; /*no-repeat不要平铺，repeat-x,横向平铺，repeat-y 纵向平铺*/

background-position:right center; /*背景位置*/ 右中

background-attachment: scroll ; /*背景的移动 ,fixed跟着滚动条一起移动，scroll 不动*/

}

4、*列表设置

ul li{

list-style:none; /*列表前样式*/ 啥都没有

list-style-image:url(images/2.gif) ; /*列表项前图片*/

margin-left:80px;

}

5、*盒子模型(border margin padding)

padding:是内容到边的距离

border: 是边的粗细

margin:是控件到控件的距离并列关系，而不是父子关系

如果给定两个值，第一个是上下，第二个是左右 padding:20px 30px; 三个值的话，第一个是上，第二个是左右，第三个是下 padding:20px 40px 30px; 四个值，上右下左

6、*定位设置(position,float,clear,z-index)
顺序流：所有的标签初始排列顺序就是顺序流。
两种情况标签脱离顺序流：
当我们把空间的位置设置为绝对定位。
当我们设置空间的float属性的时候。
脱离顺序流的是一个平面，没脱离顺序流的是一个平面
#d{

position: absolute; /*

1.绝对定位: 定义横纵坐标 .脱离了本身的顺序流原点位于父容器的左上角，向下为正，向右为正

2.相对定位: 相对的是自己在顺序流中原来的位置左上角为原点

*/

left:100px; /*横坐标*/

top:100px; /*纵坐标*/

border:1px solid red ;

width:100px;

height:100px;

background-color:#ff66ff;

}

#d1{
position: relative; /*相对位置*/
left:100px;
top:100px;
border:1px solid green ;
width:100px;
height:100px;
background-color:#339900;
}

span{
position: relative;
left:20px;
top:20px;
}

定位属性示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>定位属性</title><style type="text/css">*{padding:0px;margin:0px;}#d{position:absolute;left:20px;top:20px;width:200px;height:200px;border:1px solid red;}#d1{position:relative;left:200px;width:200px;height:200px;border:1px solid red;}</style></head><body><div id="d"><p>你好</p></div><div id="d1">d1</div></body></html>

z-index:值任意，值越大离我们越近 z方向上，上下层关系实例：鼠标放在不同的导航文字上，浮现出不同的

float : 浮动打破顺序流

overflow: 超出范围怎么办 auto;加滚动条 hidden;多余的隐藏 visible;适当调整大小使文字可见！！

鼠标样式设置(cursor) pointer 手的形状

七、滤镜(了解)

CSS的注释：

/* */

0 0