Web应用开发技术-CSS

Web应用开发技术

HTML元素属性分类：

• 特有属性

• 全局属性(所有HTML都可以使用的属性，如id等)

• 事件属性

CSS

Cascading Style Sheet，层叠样式表，一种样式表语言，其作用是控制页面内容的显示外观效果

CSS样式设置：

1.浏览器默认样式

2.外部样式表(在文档头通过link元素链接CSS文件)

3.内部样式表(直接在文档头通过style元素指定)

4.内联样式(直接在某个元素的style属性中指定)

样式设置的优先级从上往下依次递增，即内联样式的优先级最高，对于重复设置的某个样式规则，优先级高的将会覆盖优先级低的

除了内联样式，样式表是由若干个CSS规则集构成，每个规则集由选择器(Selector，选择要设置样式的元素)和一对花括号构成，花括号中包含若干条声明(Declaration即若干条具体样式规则)，每个声明都要以分号结尾，一个声明内部是由属性名和属性值构成，它们以冒号分隔，如果属性值含有空格，还需要用引号括起来

CSS中使用/* */括起来的为注释内容

盒子模型(Box Model)

在CSS眼中，一个占据页面空间的HTML元素就是一个盒子，每个盒子都具有外边距(Margin)，边框(border)，内边距(Padding)，内容(Content)这些属性

CSS学习方法：熟练掌握常用样式规则的意义和写法

文本相关样式

color：设置文本颜色

font-size：字号，常用单位有px，em，rem

font-family：字体设置，通常使用字体列表，浏览器会从左向右一次匹配，直到找到系统中可用的字体，如果没有找到就使用浏览器默认字体

font-size：字体样式，常用就是italic，即斜体

font-weight：字体粗细，常用就是bold，即粗体

text-decoration：文本装饰，常用就是underline，overline，line-through

text-align：文本排列方式，常用就是left，center，right

letter-spacing：字符间距

line-height：行高

text-indent：文本缩进

index 索引之页， apache，nginx如果不指定访问的网页，默认情况下会访问index，所以才会把主页命名为index

margin的使用：

​ margin-top: -20px;

​ margin-left: 200px;

/*margin: 50px 上下左右都为50*/

/*margin: 50px -100px 上下为50 左右为100*/

/*margin: 50px 100px 200px 上为50 左右为100 下为200px */

/*margin: 50px 100px -500px 100px 上为50 右为100 下为500px 左为100px*/

绝对单位：

px：像素，是多少像素就是多少像素

相对单位：

em：倍数，这个倍数是相对于父元素来计算的，其父元素是20px，那么它就是40px

rem：相对根元素(即html元素)来参考，不论其父元素的大小怎么变都不会变

font-*

font-size：设置字体大小，也可理解为字体的高度

font-family 设置字体，后面可以直接跟楷体，黑体等字样，当然需要浏览器安装这种字样。一般建议使用所有浏览器都安装过的字体，因为就算你的浏览器装过这种字体，别人的浏览器没装过，就会显示默认字体，达不到你的预期期望。font-family后面可以跟多种字体，你可以把你最期望的字体写在最前面，其次期望的写在后面，别人的浏览器就会一次判断有无此字体，如果有就用，都没有就使用默认字体

font-style：italic： 斜体

font-weight：字体的重量，例如后面跟bold即为加粗

text-*

text-decoration：underline 下划线 (但一般前端工程师不会这样做，因为一些字母如 g等会穿过下划线，看起来不美观)

text-decoration：line-through 删除线

text-align：设置文本的排列方式，后面可跟center(居中)，right(右对齐)等

letter-spacing： 设置字符间距 如 3rem 等

line-height：行高

text-indent：首行缩进

设置背景

background

background: url("图片路径"); 设置背景图片

后面可以跟no-repeat top 表示只要一张图并且居中

link

用来连接外部CSS样式表文件

<link rel="stylesheet" href="样式文件(以.css结尾)" type="text/css"

CSS

CSS当前最新版本为3.0，注意CSS3新增的特性并不是所有浏览器都支持的

选择器(Selector)

• 元素选择器：选择指定的元素

• ID选择器：选择指定ID属性的元素

• 类(Class)选择器：选择指定class属性的元素

• 伪类(Pseudo-class)选择器：选择特定状态下的特定元素

• 伪元素选择器(Pseudo-element)选择器：选择某个元素内部的特定内容

• 属性选择器：选择含有特定属性的元素，使用中括号将属性名括起来

• 分组选择器：同时对多个元素设置相同的样式，用逗号分隔

• 后代选择器：选择某个元素的后代元素

• 子元素选择器：选择某个元素的直接子元素，使用大于号(>)分隔

• 相邻兄弟选择器：选择紧邻某个元素的下一个元素，并且它们具有相同父元素，使用加好(+)分隔

• 普通兄弟选择器：选择某个元素的所有兄弟元素，使用波浪线(~)分隔

拥有相同父元素的元素之间互称兄弟

优先级：ID选择器 > 类选择器 > 元素选择器

显示样式(display Style)

通过display样式可以控制元素的显示方式

display：block 称为块级元素

display：inline 在一行显示

display：none 隐藏，元素所占的空间也不存在

visibility：hidden 隐藏，但元素所占的空间依旧存在

display：inline-block

定位(Position)

• static：固定定位，静态定位

• fixed：基于浏览器窗口定位，不论浏览器怎么划，它始终在那个位置

• relative：相对定位，基于元素的正常位置定位

• absolute：绝对定位，基于父元素定位

z-index：设置z轴的顺序

当两个元素显示位置存在交叉时，可以通过设置z顺序(z-index)控制他们的呈现方式

浮动(Float)

使用float属性，常用属性值为left和right

float：right 飘到最右边

clear：both 清楚浮动

飘起来后块级元素会压缩，会呈现在一行

扩展

1. style属性 全局属性，针对body里的内容

   在发生重复时，body里的style的优先级更高

   在head中设置的style 会对body里指定的内容都生效

2. 一般浏览器的默认字号为16px

3. 通常情况下子元素会继承父元素的大多数样式，若font-size等

4. 多个元素可以使用相同的Class，但ID必须唯一

   5.假如有多个相同元素需要设置不同的CSS样式，那么就可以用class，示例如下：<p id="tip">azhe</p>

   <p class="text">nihao!</p>

   <p class="text">中国</p>

   6.在CSS样式中id的CSS名称用#加上id，即#tip，class的CSS名称为 .text

   7.http默认端口是80，https默认端口号是443

   8.样式资源网weui框架网， bootstrap

   9.一般CSS样式中带有 - 横杆的都是为了一些浏览器专门准备的

   10.min-width：50px 最小的宽度

   11.CSS样式 *[id] 表示只要有id就执行以下属性

   *[id*=stu]表示只要id属性中含有stu就执行其下面的属性

   12.列表样式

   list-style-type：默认为圆形 可以跟none让前面没有形状

   表格

   border-collapse：collapse; 合并边框

   13.对内联元素来说上下内外边距高度宽度都无效，对块级元素都是有效的

   14.hover选择鼠标指针浮动在其上的元素，并设置其样式

   15.selected 使被选中的文本成为固定的颜色