CSS笔记

来源：互联网发布：ipod打电话软件编辑：程序博客网时间：2024/06/04 01:09

#1——CSS入门基础

一、基础阶段任务 ◆熟练掌握HTML的标签。

◇要求：看到HTML网页，能够知道网页使用什么标签定义，标签是怎么写的，怎么用的。及其关联属性和类似的标签都有什么。

◆CSS需要掌握的内容 ◇选择器
◇盒子模型
◇浮动
◇定位
◇目标：制作一个案例项目。
◆JS
◇简单的语法结构

◇循环便利、数组等。

二、CSS起源

◆ HTML标签既负责页面结构，又要调整样式，所以出现混乱，页面结构复杂不易于调试和维护。所以出现了 CSS，让HTML标签只负责页面结构，CSS只负责美化结构就行，让HTML和CSS分工明确，也就是说让HTML的结构和 CSS美化效果分离开来。

◆CSS概念： Cascading style sheets 层叠样式表（级联样式表）

◆HTML和CSS的关系 HTML只负责写网页结构 CSS负责美化页面盖楼：先盖主体，再装修

◆CSS的书写位置 ◇内嵌式写法

◇外链式写法
◇行内式写法

三、CSS的内嵌式写法

◆CSS标签写在HTML中，原则上可以写在任何位置，但一般都书写在head标签中。 <head> <style type="text/css"> </style> </head>

◆CSS的语法格式：选择器 {属性：值；} ◇选择器：选择HTML的过程、方法

■简单选择器 □标签选择器

□类选择器 □id选择器 □通配符选择器

■复合选择器 □后代选择器 □标签指定式选择器（交集选择器） □并集选择器 □子代选择器 □属性选择器

四、选择器详解（上）：简单选择器部分

◆标签选择器

◇语法格式：标签名 {属性1：值1;属性2:值2;······；属性n：值n；} ◇示例： <p>段落1文字</p> <p>段落2文字</p> <style type="text/css"> p { color：red； } </style> 效果：所有的p标签中的文字都变成红色。结论：标签选择器可以使HTML文档中所有选中的标签都进行样式设置。

◆类选择器

◇语法格式： .自定义类名 {属性：值···；属性:值； }

◇通过标签的class属性使用类的样式属性。

◇类的命名规范：由数字、字母、下划线组成，数字不能作为开头，不允许使用特殊字符，最好见名知意。

◇示例：

效果：class="content"的段落文字1颜色变成红色。

结论：类选择器需要定义后通过标签的class属性来调用样式。

一个标签可以使用多个类，

例如：

.content1{color:red;}

.content2{font-size:14;} <p class="content1 content2"></p>

◆ID选择器 ◇语法格式： #ID {属性：值；···；属性：值；}

◇特点：通过标签的ID属性来设置类样式，标签的ID是唯一的。

◇示例：

<p id="content">段落文字1</p> <p id="text_1">段落文字_text</p> <style type="text/css"> #text_1 { color:red; } </style> 效果：id为text_1的段落文字_text颜色变成红色结论：通过id选择器只能选择到一个标签，只对一个标签进行操作。

◆通配符选择器

◇语法格式： * {属性：值；···；属性：值}

◇示例： <a href="#">超链接</a> <p>段落文字</p> <style type="text/css"> * { color:red; } </style> 效果：所有文字都变成红色结论：通过通配符选择器可以获得HTML文档中所有的元素。

五、外联式写法

◆将CSS代码单独写到一个css文件中，将CSS样式和HTML结构代码分离，提高代码的可读性

◆格式： <head> <link rel="stylesheet" ref="CSS文件路径"> </head>

◆注意：在css文件中不必再次声明style标签。 ◇以后项目中都是外链式写法。

六、行内式写法

◆将CSS代码写在单独的标签行内。

◆示例： <p style="color:red;">段落文字</p> ◇以后用的不多。

七、关于文本属性

◆关于颜色 color：red

■颜色值可以为： □颜色单词，例如：red、blue、green等 □16进制表示法 0~f的16进制表示。例如：#696969

□RGB表示法 RGB表示三元色：Red、Green、Blue的色值。取值范围0~255。例如：rgb(0,0,0); □RGBA表示法 A表示Alpha透明度通常以RGBA实现透明效果。透明度取值范围0~1 例如：rgba(0,0,0,.5)--> .5表示0.5

■不用记这些颜色值，可以通过调色板获取16进制值和rgb值。

◆文字属性

◇单位：

■ px：像素

■em：一个文字的大小

◇设置文字大小： font-size属性。示例：font-size:10px; font-size:2em;

◇设置文字首行缩进： text-indent:2em

■通常以em为单位

◇设置文字加粗： font-weight：取值范围100~900

■正常默认是400（normal），加粗是700（bold）

◇设置文字斜体： font-style :取值normal/italic

◇设置文字字体： font-family：取值范围是计算机中的字体均可。

示例： font-family:"宋体"

■font-family可以同时设置多个，

例如：font-family:"宋体" "黑体" 则浏览器按次序去显示。

◇设置文字的行高 line-hight:10px;

◇font属性的联写格式： font:weight style size/line-hight family

■size和family是必须项，并且两者位置不能调换。

示例： font：700 italic 20px/35px "宋体" 或者： font：20px "宋体"

八、背景颜色：

◆background-color：背景颜色属性

◆示例： <p>段落文字</p> <style type="text/css"> p {

background-color：red；

} /* 在sublime中，可以bgc+tab快速生成 */ </style>

#2——CSS入门基础
一、选择器详解（下）：符合选择器部分
◆标签指定式选择器（交集选择器）

◇语法：标签名(其他选择器) {属性：值；}

◇示例： <p class="content">段落文字1</p> <p>段落文字2</p> <style type="text/css"> p.content { color:red; } </style> 效果：段落文字1显示红色结论：标签指定式选择器中的两个选择器是既~又的关系，如示例中，既是p标签，又必须class属性为content 的元素被选中。
◆后代选择器

◇语法：选择器1 选择器2 ··· 选择器n {属性：值；}

◇示例： <div> <p>段落中的段落文字</p> <a href="#">超链接</a> </div> <style type="text/css"> div a { color:red; } </style> 效果：div标签中的a标签颜色变成红色。

结论：

■后代选择器必须是用在嵌套关系的标签上。

■后代选择器只能获得子元素并且是获得所有的后代子元素。
◆并集选择器

◇语法：选择器1，选择器2，···，选择器n {属性：值；}

◇示例： <p>段落文字1</p> <a href="#" class="content">超链接</a> <style class="text/css"> p,a { color:red; } </style> 效果：p标签和a标签中的文字都变成红色
结论：并集选择器必须由，号隔开，选择的结果是所有符合条件的元素。
◆子代选择器（了解）

◇语法：选择器>选择器 {属性：值；} ◇特点：标签必须嵌套，子代选择器只能选择直接后代。
◆属性选择器（了解）

◇语法：选择器[属性="值"] {属性：值；}

二、HTML标签按显示方式分类

◆块级元素 ◇h1~h6、div、p、ul···等 ◇特点：

■块级元素的宽度默认是父级元素的宽度。

■块级元素高度默认由其内容的大小决定，但是可以直接设置其高度。

■块级元素是独占行显示的。 ◆行内元素 ◇span、a、b、s···等 ◇特点： ■行内元素是非独占行显示的。 ■行内元素宽和高默认由其内容决定，本质上没有宽度。 ■不能给行内元素设置宽和高。

◆行内块元素 ◇img、input ◇特点： ■非独占行显示。 ■可以设置宽和高。 ◆div标签元素 ■div是一个无语义的标签，是一个块级元素。相当于一个容器，可以放任何的HTML元素。

■示例：

<div>div_1中的文字</div> <div>div_2中的文字</div> <style type="text/css"> div { color:red; width：200px; height:100px; background-color:green; text-align:center; } </style> □text-align属性：文字对齐方式。该属性可以在块级元素（行内块）中定义。

◆span标签元素
■span是一个无语义的标签，是一个行内元素。相当于一个容器，可以放任何的HTML元素

■示例： <span> 行内元素span标签 </span> <style type="text/css"> span { background-color:red; font:700 18px/24px "宋体"; } </style>
◆元素模式转换 ◇display属性：显示方式

◇取值范围：block(块级元素) / inline-block（行内块元素） / inline（行内元素）

◇示例: <span class="content">行内元素文字1</span> <span class="content">行内元素文字2</span> <style type="text/css"> .content { display:block; width:80px; height:80px; } </style> 效果：span标签可显示成块级元素，并且独占行显示。结论：display可以将任何的元素进行转换，但通常情况下，在需要给行内元素设置宽和高时才需要转换。并不是所有的元素都需要进行转换。
三、CSS特性

◆层叠性
◇同一个标签中使用多个样式，如果样式发生冲突，最后定义的样式会覆盖之前的样式。
◇示例： <p class="content1 content2"> 段落文字 </p> <style type="text/css"> .content1 { color:red; font-size:20px; }
.content2 { color:green;
} </style> 效果：段落文字显示绿色，20px。
◆继承性
◇在嵌套关系的标签中，子元素在默认情况下，会受到父元素的样式影响。
◇注意：宽度和高度不能继承。（块级元素的宽度与父级元素相同不属于继承性）
◇可以继承的属性：

■与文字相关的属性，例如color、font属性、行高line-hight等

■如果子元素有默认的样式，则不会继承父元素样式，比如： <p style="color:red"><a href="#">超链接</a></p> 此时，超链接文字不会显示成红色。 □继承的特殊标签： a标签的文字颜色不受父元素影响标题标签(h1~h6)不受父元素的文字大小影响。

◆优先级
◇样式定义后给元素渲染的权重不同。标签选择器 < 类选择器 < ID选择器 < 行内样式 < ! Important ◇继承的样式权重为0
四、伪类 ◆CSS伪类是用来添加一些选择器的特殊效果。

◆语法：选择器:伪类名 {属性：值；} ◆常见的伪类：

◇a:link：a标签的默认样式

◇a:visited：a标签访问过后的样式 ◇a:hover：鼠标划过 ◇input：focus ：输入框获得光标五、背景（background）

◆给标签元素添加背景，包括颜色、图片等信息 ◇background-color：背景颜色 ◇background-img: url(图片路径) 背景图片 ◇background-repeat：背景图片平铺方式

■repeat/no-repeat/repeat-x/repeat-y ◇background-position：背景图片位置

■具体方位名称： left / right / top / bottom / center

■具体数值水平位置（x）垂直位置（y） ◇background-attachment 背景图片滚动方式

■ scroll / fixed ◇background属性联写 background：背景颜色背景图片平铺方式滚动方式背景图片位置示例： background：url(bg.png) no-repeat left;

阅读全文

0 0