CSS学习笔记（一）

浅浅的花香味﹌ 2023-08-17 16:03 55阅读 0赞

## 页面布局概述 ##

布局也可以叫做排版，它指的是把文字和图片等元素按照我们的意愿有机地排列在页面上，布局的方式分为两种：

*  table布局：通过table元素将页面空间划分成若干个单元格，将文字或图片等元素放入单元格中，隐藏表格的边框，从而实现布局。这种布局方式也叫传统布局，目前主要使用在EDM(广告邮件中的页面)中，主流的布局方式不用这种。
 *  HTML+CSS布局(DIV+CSS)：主要通过CSS样式设置来布局文字或图片等元素，需要用到CSS盒子模型、盒子类型、CSS浮动、CSS定位、CSS背景图定位等知识来布局，它比传统布局要复杂，目前是主流的布局方式。

### table布局技巧归纳 ###

*  按照设计图的尺寸设置表格的宽高以及单元格的宽高。
 *  将表格border、cellpadding、cellspacing全部设置为0，表格的边框和间距就不占有页面空间，它只起到划分空间的作用。
 *  针对局部复杂的布局，可以在单元格里面再嵌套表格，嵌套表格划分局部的空间。
 *  单元格中的元素或者嵌套的表格用align和valign设置对齐方式
 *  通过属性或者css样式设置单元格中元素的样式

#### CSS概述 ####

为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。

#### css页面引入三种方法 ####

1.  外联式：通过link标签，链接到外部样式表到页面中。

1.  嵌入式：通过style标签，在网页上创建嵌入的样式表。

3.内联式：通过标签的style属性，在标签上直接写样式。

#### css基本语法 ####

css的定义方法是：  
选择器 \{ 属性:值; 属性:值; 属性:值;\}  
选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。代码示例：

/*
        css注释 ctrl+shift+"/"
    */
    
    div{ 
        width:100px; 
        height:100px; 
        color:red 
    }

#### css文本设置 ####

*  color 设置文字的颜色，如： color:red;
 *  font-size 设置文字的大小，如：font-size:12px;
 *  font-family 设置文字的字体，如：font-family:‘微软雅黑’;
 *  font-style 设置字体是否倾斜，如：font-style:‘normal’; 设置不倾斜，font-style:‘italic’;设置文字倾斜
 *  font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗
 *  font-weight:normal 设置不加粗
 *  line-height 设置文字的行高，设置行高相当于在每行文字的上下同时加间距， 如：line-height:24px;
 *  font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写：font：是否加粗 字号/行高 字体；如： font:normal 12px/36px ‘微软雅黑’;
 *  text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
 *  text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
 *  text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中

代码演示：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>常用文本样式</title>
    	<style type="text/css">
    		div{
    			color: blue;
    			/*font-size: 20px;			
    			font-family: "Microsoft Yahei";  
    			line-height: 40px;*/
    			font:normal 20px/40px '微软雅黑';			
    		}
    
    		em{
    			font-style: 'normal';
    			color: red;
    		}
    		span{
    			color: gold;
    			font-family: '楷体';	
    			font-size: 30px;	 
    		}
    		h1{
    			font-weight:normal;
    		}
    		a{
    			text-decoration: none;
    			text-align: center;
    		}
    		h2{
    			text-align: center;
    		}
    		p{
    			text-indent: 40px;
    			line-height: 40px;
    			text-align: center;
    		}
    	</style>
    </head>
    <body>
    	<h1>励志格言</h1>
    	<div>
    		<span>提升技能是一条漫长而艰苦的道路</span>，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯。所以：<em>贵在坚持</em>！		
    	</div>
    	<dir></dir>
    	<a href="https://www.baidu.com/"> 百度链接</a>
    	<h2>html简介</h2>
    	<p>
    		HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
    	</p>
    	
    </body>
    </html>

网页效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE3MDA1OA_size_16_color_FFFFFF_t_70]

#### css颜色表示法 ####

css颜色值主要有三种表示方法：

1.  颜色名表示，比如：red 红色，gold 金色
2.  rgb表示，三原色红绿蓝，每一种颜色都是0~255级，可以理解为rgb光，0表示没有光，255表示最强的光。比如：rgb(255,0,0)表示最强的红色，rgb(0,0,0)表示黑色，rgb(255,255,255)表示白色
3.  16进制数值表示，比如：\#ff0000 表示红色，这种可以简写成 \#f00

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE3MDA1OA_size_16_color_FFFFFF_t_70]: /images/20230810/b0595a16a1a3465395144996b0d5b851.png