网页编程day-39:CSS

一、引入CSS样式与 CSS选择器

1.css入门：

（1）什么CSS？

1）CSS 指层叠样式表 (Cascading Style Sheets)；

2）样式定义如何显示 HTML 元素；

3）外部样式表可以极大提高工作效率；

4）外部样式表通常存储在 CSS 文件中；

（2）为什么学习CSS？

1）HTML 虽然可以在一定程度上修饰页面，但是页面的整体还是不够美观。

2）HTML 进行网页的书写重复的代码比较多，后期的维护性不好。

2.引入CSS样式：

（1）行内式（不推荐）：在标签内部直接使用；

style=“key:value;”style="font-size:像素;color: 颜色;"；

（2）内嵌式：使用style标签，style标签写建议写到head里面，因为这个中的内容需要展现到用户面前的。

（3）链接式：rel:当前的文档和引入的文档的关系；href:是指引入文档的关系。

语法：<link rel="stylesheet" href="css路径"；

3.CSS选择器：

（1）标签选择器：

p{

color: red;

}

（2）ID选择器：

1）ID命名规则：

id:(唯一性)；可以是数字、字母、下划线、中划线（-），不能用数字开头。

2）id 选择器以 "#" 来定义；

#ID名{

font-size: 30px;

color: yellowgreen;

}

（3）Class选择器：

.类名{

font-weight: bold;

color: yellow;

}

（4）三种选择器的优先级：

id 选择器>class 选择器>标签选择器；

（5）其他选择器：

1）后代选择器（父选择器  后代选择器）：

匹配父选择器下的所有后代。

2）子选择器（父选择器>直系子标签）：

匹配父选择器下的直接子元素。

3）伪类选择器：

二、CSS中常用的属性

1.字体（font）：

1）颜色：color：gray；

2）大小：font-size；

3）加粗：font-weight：bold；

4）风格：font-family：样式；

5）倾斜：font-style：italic;

2.文本（text）:

1）去除下划线：text-decoration：underline；

2）展示下划线:text-decoration：none；

3）文本居中：text-align：center；

4）行高：line-height；

3.border边框：

可以使用border统一设置

1）border: 1px solid red；

2）border-right: 5px dotted blue；

4.背景：

1）背景图片：background:url(图片位置)repeat-x；

2）背景图片大小：background-position：center；

5.行元素和块元素：

（1）.行元素（span，font，img，a）；

（2）块元素（div，h1-h6，ul，p等）；

（3）其他样式：超出隐藏：overflow：hidden；

三、CSS中的定位与框模型

1.CSS中的定位：

（1）绝对定位：

absolute :定位离开之后释放的之前的位置，基于外层父级标签来说。

（2）相对定位：

relative: 定位离开之后之前的位置没有释放 基于之前的位置来说。

（3）固定定位：

fixed ：始终是基于浏览器的左上角定位 。

（4）默认定位：

static ：初始的定位的操作。

2.框模型（盒模型）：

盒子模型示意图：

（1）内边距（padding）：

 padding 属性定义元素边框与元素内容之间的空白区域。

1）padding 属性接受长度值或百分比值，但不允许使用负值。

2）设置内边距属性：

（2）外边距（margin）：

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。

1）margin 属性接受任何长度单位，可以设置为 auto，可以是像素、英寸、毫米或 em。

2）设置外边距属性：