web开发 -2- DIV+CSS

最新推荐文章于 2022-08-23 10:40:38 发布

tanya!

最新推荐文章于 2022-08-23 10:40:38 发布

阅读量257

点赞数 1

分类专栏： web开发文章标签： web开发

本文链接：https://blog.csdn.net/weixin_43690906/article/details/88745483

版权

web开发专栏收录该内容

16 篇文章 1 订阅

订阅专栏

DIV 用于搭建html网页结构（框架）的标签
CSS 用于创建网页表现（样式/美化）样式表的统称
通过CSS来设置DIV标签样式

1. 在HTML中引入CSS的方法

优先级由高到低：行内式、嵌入式、导入式、链接式

1.1 行内式

<td sytle="color:red;text-decoration:underline" width="92%">

1.2 嵌入式

<head>
	<style type="text/css">
	h1{
		color:red;
		font-size:25px;
	}
	</style>
</head>

1.4 导入式

#先加载完页面再装载CSS文件
<style type="text/css">
	@import url("style1.css");
</style>

1.5 链接式

#在装载主体部分之前装载css文件，显示出来的页面从一开始就是带css样式的
<link href="style1.css" rel="stylesheet" type="text/css" />

2. 选择器分类

#2.1 标记选择器
#2.2 类选择器.class
#2.3 ID选择器 #id
#2.4 伪类选择器 ：a:link(普通) ->a:visited(单击) ->a:hover(悬停) ->a:active(激活)

3. CSS盒子模型

边框：bordre
填充：padding
边界：margin
盒子模型

4. CSS基本语法

4.1 编辑CSS样式的字体格式

定义文字的字体、大小、粗细的表现等

font 统一定义字体的所有属性 
font-family 定义使用的字体（可以定义多种字体连在一起 用，分隔）
font-size 定义字体的大小
font-style 定义字体显示的方式 例斜体
font-variant 定义小型的大写字母字体 对中文没什么意义
font-weight 定义字体的粗细

font-size

中文常用字体是12px
在浏览器中可以使用Ctrl++增大字体 Ctrl–缩小字体

xx-small; x-small; small; medium; xlarge; xxlarge

font-style

normal : 正常的字体 即浏览器默认状态
italic : 斜体 对于没有斜体变量的特殊字体 将应用oblique
oblique: 倾斜的字体 即没有斜体变量

font-variant

normal : 正常的字体 即浏览器默认状态
small-caps : 定义小型的大写字母

font-weight

normal: 正常 等同于固定值在400以下的 400 
bold: 粗体 等同于固定值在500以上的  700
bolder: 更粗
lighter: 更细

4.2 编辑CSS样式的文本格式

定义文字、空格、单词、段落的样式

letter-spacing 定义文本中字母的间距 （文字的间距 字母之间的距离）
word-spacing 定义以空格间隔文字的间距 （空格本身的宽度）
text-decoration 定义文本是否有画线以及画线的方式
text-transform 定义文本的大小写状态 对中文无意义
text-align  定义文本的对齐方式
text-indent 定义文本的首行缩进（在首行文字之前插入指定的长度）

letter-spacing 、word-spacing

normal: 默认间距 主要根据用户所使用的浏览器等设备
< length > : 由浮点数字和单位标识符组成的长度值 允许为负值
 例：3px -3px  、30px -10px

text-transform

Capitalize: 首字母大写
Uppercase: 将所有设定此值的字母变为大写
Lowercase: 将所有设定为此值的字母变为小写
None: 正常无变化 即输入状态

text-align

Left: 对于当前块的位置为左对齐
Right: 对于当前块的位置为右对齐
Center: 对于当前块的位置为居中
Justify: 对齐每行的文字

text-indent

< length > 数字由浮点数字和单位标识符组成的长度值 允许为负值 2em 10px
< percentage > 百分比表示法

4.3 编辑CSS样式的背景格式

background-color:背景色 定义背景的颜色
background-image:定义背景图片
background-repeat:定义背景图片的重复方式
background-position:定义背景图片的位置
background-attachment:定义背景图片岁滚动轴的移动方式

background-color

< color > 颜色表示法 可以使数值表示法 也可以使颜色名称
Transparent : 背景色透明

background-image

< url > 使用绝对或相对地址指定背景图像
none 将背景设置为无背景

background-repeat

Repeat 平铺整个页面 左右与上下
repeat-x 在x轴上平铺 左右
repeat-y 在y轴上平铺 上下
no-repeat 当背景大小比所要填充的块小时 图片不重复

background-position

水平方向

left : 对于当前填充背景位置居左
right : 对于当前填充背景位置居右
center : 对于当前填充背景位置居中

垂直方向

 top : 对于当前填充背景位置居上
  bottom : 对于当前填充背景位置居下
  center : 对于当前填充背景位置居中

垂直于水平的组合
```
x-% y-%;
x-pos y-pos;
```

background-attachment

Scroll : 随着页面的滚动 背景图片将移动
Fixed : 随着页面的滚动 背景图片不会移动

4.4 编辑CSS链接格式

超链接< a > 具体地址利用href 属性

<a href="http://www.baidu.com"> 链接文本 </a>

在浏览器默认的浏览方式下超链接统一为蓝色且有下划线被点击过的超链接则为紫色也有下划线

/* 超链接样式*/
a{text-decoration:none;margin-left:20px} /*去掉下划线*/

可制作动态效果的CSS伪类别属性如下：

a:link 超链接的普通样式 即正常浏览状态的样式
a:visited 被点击过得超链接的样式
a:hover 鼠标指针经过超链接上时的样式
a:active 在超链接上点击时 即“当前激活”时超链接的样式

4.5 编辑CSS样式的列表属性

CSS列表属性可以改变HTML列表的显示方式

list-style-type 定义列表的样式
list-style-image 定义列表样式的图片
list-style-position 定义列表样式的位置
list-style 统一定义列表样式的几个属性

list-style-type

设置或检索对象的列表项所使用的预设标记

Disc : 点
Circle : 圆圈
Square : 正方形
Decimal : 数字
None :无（取消所有的list样式）

4.6 编辑CSS样式的区块属性

块级元素 ：段落< p > 、标题 < h1 > < h2 > 、列表< ul >< ol > < li > 、表格 < table > 、表单 < form > 、 DIV < div > 、 BODY < body >等元素
内联元素 ：表单元素 < input > 、超级链接 < a > 、图像 < img > 、< span > 等
块级元素的特点：都是从一个新行开始显示而且其后的元素也需另一一行显示

用CSS中的display:inline可以将块级元素改变为内联元素
也可以用display:block将内联元素改变为块级元素
使用display:none可以将元素隐藏并且不会占据空间

4.7 编辑CSS样式的宽高属性

块级元素可以设置宽度和高度但是行内元素是不能设置的

4.8 编辑CSS边框属性

border一般用于分隔不用的元素
border的属性有三个：color（颜色）、width （粗细）、style（样式）

border-color : 设定border的颜色通常情况颜色值为十六进制数如红色为“#ff0000” 也可以是颜色的英语单词
border-width :设定corder的粗细程度可以设为thin medium thick 或者具体的数值单位为px 默认宽度是medium 一般浏览器将其解析为2px
边框设置两个属性值：前者表示上下边框的属性后者表示左右边框的属性
边框设置三个属性值：前者表示上边框的属性中间表示左右边框的属性后者表示下边框的属性
边框设置四个属性值：依次表示上、右、下、左边框的属性即顺时针排序
也可以单独设置某一条边框例：border-left:… 、border-left-color:…
border-style : 设定border的样式 none（无边框线）、dotted（有点组成的虚线）、dashed（由短线组成的虚线）、solid（实线）、double（双线双线宽度加上他们之间的空白部分的宽度就等于border-width定义的宽度）、groove（根据颜色画出3D沟槽状的边框）、ridge（根据颜色画出3D脊状的边框）、inset（根据颜色画出3D内嵌边框颜色较深）、outset（根据颜色画出3D外嵌边框颜色较浅）

5. 理解CSS定位与DIV布局

中心思想：实现结构与表现分离
内容是结构的基础

RAW:“未经加工”的意思 RAW格式的图像就是CMOS或者CCD图像感应器将捕捉到的光源信号转化为数字信号的原始数据

tanya!

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
web开发 -2- DIV+CSS

DIV 用于搭建html网页结构（框架）的标签CSS 用于创建网页表现（样式/美化）样式表的统称通过CSS来设置DIV标签样式CSS基本语法编辑CSS样式的字体格式定义文字的字体、大小、粗细的表现等font 统一定义字体的所有属性 font-family 定义使用的字体（可以定义多种字体连在一起用，分隔）font-size 定义字体的大小font-style 定义字体显示的...
复制链接

扫一扫