CSS介绍

最新推荐文章于 2022-05-19 01:03:44 发布

原创最新推荐文章于 2022-05-19 01:03:44 发布 · 447 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #html5

Web 专栏收录该内容

10 篇文章

订阅专栏

CSS

概念：CSS（cascading style sheet）层叠样式表 or 级联样式表。
作用：美化网页，提供更好的交互体验与视觉效果。
基础语法：

属性名：属性值;

1 CSS样式定义

1.行内样式
作用：为某个元素添加特殊样式。
语法如下：

<html标签 style="属性名:属性值; 属性名:属性值;..."></html标签>

演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ccs</title>
</head>
<body>
    <h1 style="background-color: red; font-size: 20px;">www.adair.com</h1>
</body>
</html>

运行如图所示：在这里插入图片描述
2.内嵌样式
作用：在head标签里统一定义css样式，作用于网页中的多个标签。
语法如下：

<head>
	<style type="text/css"> 
		选择器{
			属性名:属性值; 
			属性名:属性值 
		} 
	</style>
</head>

3.选择器
作用：筛选同一类别的元素。

标签选择器
作用：网页中某种相同的标签。
语法如下：

标签名{
	属性名:属性值; 
	属性名:属性值
	}

演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ccs</title>
    <!-- 引入外部级联样式 -->
    <style>
        h1{
            background-color:#00ffff;
            font-size:20px
        }
    </style>
</head>
<body>
    <h1>www.adair.com</h1>
    <h1>www.baidu.com</h1>
</body>
</html>

运行如图所示：在这里插入图片描述
2. class选择器
作用：可以在标签中添加class属性并设置名称，为名称相同的标签提供样式。
语法如下：

.名称{
	属性名:属性值; 
	属性名:属性值
	}

演示：

.<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ccs</title>
    <style>
        /*class选择器，选择标签中class属性值一样的标签*/
        .mystyle{
            background-color: #00ffff;   /*背景颜色*/
            color: red;     /*字体颜色*/
        }
    </style>
</head>
<body>
    <h1 class="mystyle">www.adair.com</h1>
    <p class="mystyle">www.baidu.com</p>
</body>
</html>

运行如图所示：在这里插入图片描述
3. id选择器
作用：可以在标签中添加id属性并设置名称，为名称相同的标签提供样式。
语法如下：

#名称{
	属性名:属性值; 
	属性名:属性值 
	}

演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ccs</title>
    <style>
        /* id选择器，选择标签中id属性值一样的标签 */
        #in{
            background-color: #00ffff;
        }
    </style>
</head>
<body>
    <input id="in" type="text" />
    <input id="in" type="button" value="按钮"/>
</body>
</html>

运行如图所示：在这里插入图片描述
4. 后迭代选择器
作用：多选择器联合使用，可以进一步筛选元素。
语法如下：

选择器1 选择器2{
	 属性名:属性值; 
	 属性名:属性值
	  }

演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ccs</title>
    <style>
        /*table标签中 id属性为in的标签*/
        table #in{
            background-color: #55ff7f;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr id="in">
            <td>姓名</td>
            <td>年龄</td>
            <td>班级</td>
        </tr>
        <tr>
            <td>Adair</td>
            <td>18</td>
            <td>java</td>
        </tr>
    </table>
</body>
</html>

运行如图所示：在这里插入图片描述
5. 伪类选择器
作用：用于定义元素的特殊状态。
演示：设置鼠标在超链接中悬停的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ccs</title>
    <style>
        a:hover{
            text-decoration: none;      /*取消下横线*/
            color: red;     /*设置字体颜色*/
        }
    </style>
</head>
<body>
    <a href="">www.baidu.com</a>
</body>
</html>

运行如图所示：在这里插入图片描述

4.外部样式
作用：将css代码保存到.css文件，可以在多页网页中引入。
新建 mystyle.css 文件。
使用link标签引入文件。
语法如下：

<link type="text/css" rel="stylesheet" href="css文件路径" />

演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ccs</title>
    <style> </style>
    <!-- 引入外部样式 -->
    <link type="text/css" rel="stylesheet" href="./css/mystyle.css" />
</head>
<body>
    <input id="in" type="text" />
    <input id="in" type="button" value="按钮"/>
</body>
</html>

mystyle.css,如图所示：在这里插入图片描述
运行如图所示：
注意：标签应定义在标签中，以上各类样式混合使用，不重复的属性叠加，重复的属性采用就近原则。
运行如图所示：

2 常见CSS属性

1.文本字体相关
对照表，如图所示：在这里插入图片描述
演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ccs</title>
    <!-- 引入外部级联样式 -->
    <style>
        td{
            color: #ADFF2F;
            /* font-size: small; */
            font-size: 50px;
            font-weight: 100;
            line-height: 10;
            text-decoration: overline;
            text-align: center;
            border: #ADFF2F 10px solid;
            width:300px;
            background-image: url(../web/images/demo2.jpg);
            background-repeat: no-repeat;
            background-position: center bottom;
            background-color: red;


        }
    </style>
</head>
<body>
<table>
    <tr>
        <td>囍●</td><td>●囍</td>
    </tr>
</table>
</body>
</html>

如图所示：在这里插入图片描述
2.边框相关
对照表，如图所示：
演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ccs</title>
    <style>
        .mystyle{
            background-color: #00FFFF;
            border:red  2px solid;
            color: red;
        }
    </style>
</head>
<body>
    <h1 class="mystyle">www.adair.com</h1>
</body>
</html>

运行如图所示：在这里插入图片描述
3.尺寸
对照表，如图所示：
4.背景相关
对照表，如图所示：
5.鼠标相关
对照表，如图所示：

3 布局

1.span 行级标签
作用：本身没有任何样式，用于对处于一行中的内容设置样式。
演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ccs</title>
    <style>
    </style>
</head>
<body>
    <span style="color: red;">用户名：</span>
    <input type="text" />
</body>
</html>

运行如图所示：在这里插入图片描述
2.div块级标签
作用：设置一个块区域的样式，自占一行。
演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ccs</title>
    <style>
    </style>
</head>
<body>
    <div style="color: red;">用户名：</div>
    <input type="text" />
</body>
</html>

运行如图所示：在这里插入图片描述

3.定位元素
作用：将元素定位到某个位置。如图所示：在这里插入图片描述
演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ccs</title>
    <style>
        #div2{
            width: 100px;   /* 宽度 */
            height: 100px;  /* 高度 */
            background-color: #00FFFF;      /* 背景颜色 */
            position: relative;             /* 相对定位 */
            left: 20px;                     /* 左边距 */
            top: 20px;      /* 顶部边距 */
            z-index: -1;    /* 图层（z轴） */
        }
    </style>
</head>
<body>
    <div style="border: solid 10px;"> 
        <div id="div2">
        </div> 
    </div>
    <span>定位测试</span>
</body>
</html>

运行如图所示：在这里插入图片描述
4.盒子模型
概念：将DIV想象成一个盒子，可以设置内边距与外边距，如图所示：

例：内边距与外边距。

4 网页程序发布

作用：将网页部署到远程主机（服务器）中，在网络环境中共享。
服务器：运算能力较强的主机或集群，存储数据并对外提供服务（发送数据）。
服务器软件：将应用程序部署到其中，服务器软件可以协调算力、管理资源、监控性能与维护。
1.应用程序体系结构

C/S结构：（Client客户端 / Server服务器）
特点：

使用桌面程序作为客户端（Client）通过自定义协议与服务器通信，从服务器中获取数据或发送数据。

优缺点：

优点：桌面级应用 响应速度快，安全性强，个性化能力强，响应数据较快。
缺点：需要提供运行环境，对客户端主机要求较高，必须安装客户端软件，经常需要升级。

C/S体系软件结构图：在这里插入图片描述
2. B/S结构：（Browser浏览器 / Server服务器）
特点：

使用浏览器作为客户端（Client）通过http协议与服务器通讯，从服务器中获取数据或发送数据。

优缺点：

优点：不需要下载安装特定软件，对客户端要求较低，可以跨平台，使用成本低，不需要维护。
缺点：功能较少，个性化能力较弱，无法承载大型应用。

B/S体系软件结构图：在这里插入图片描述
2.网页程序工作原理
步骤：

1. 用户使用浏览器输入URL与Web服务器建立链接。
2. Web服务器从URL中获取用户要访问的文件名称或程序标识。
3. Web服务器将文件内容回传到浏览器中或执行指定程序将结果返回到浏览器中。
4. 浏览器将文件或数据显示给用户。

工作原理示意图：在这里插入图片描述
相关概念：web（World Wide Web)即全球广域网，也称为万维网，WWW。
3.搭建B/S体系环境
安装服务器软件
apache组织开发的Tomcat服务器软件，轻量级，开源免费。

访问：https://tomcat.apache.org/ 进行下载
步骤：

1. 解压tomcat安装包（解压版），解压目录不要存在中文或特殊符号。
2. 进入tomcat目录中的bin目录双击运行startup.bat 启动服务器。
3. 打开浏览器在地址栏输入http://127.0.0.1:8080 并访问。
4. 看到主页后证明启动成功，关闭窗口或执行bin目录中的shutdown.bat。

注意：Tomcat运行需要jdk，务必检查JAVA_HOME环境变量是否正确配置。
Tomcat启动乱码问题解决办法：

1. 打开你安装Tomcat的所在目录。
2. 打开后选择conf目录。
3. 将里面的logging.properties文件用编辑器打开，本例子是使用“Notepad++”编辑器打开。
4. 打开后大约在50行左右找到java.util.logging.ConsoleHandler.encoding = UTF-8 
5. 修改为java.util.logging.ConsoleHandler.encoding = GBK； 
6. 1catalina.org.apache.juli.AsyncFileHandler.encoding = GBK
7. 重新启动Tomcat就可以了。

Tomcat目录结构：
在这里插入图片描述
4.发布（部署）静态网页
将静态网页项目拷贝到webapps目录中，作为自己的一个web应用。

部署后的目录结构，如图所示：
5.使用客户端（浏览器）访问ems应用
18. 打开浏览器，在地址栏输入URL
URL(Uniform Resource Locator)：统一资源定位符，通过URL可以定位到远程服务器中的一个资
源或程序标识
URL结构：

协议://ip:端口/web应用名/资源名

演示：

http://192.168.64.3:8989/ems/login.html

运行如图所示：
相关概念：

1. IP地址：互联网上的每一个网络和每一台主机分配一个逻辑地址。
2. 端口：操作系统为程序分配的唯一标识，范围0~65535。
3. URI(Uniform Resource Identifier)：统一资源描述符,可以在服务器中标识一个资源文件 URI类似于身份证号，URL是包含了详细地址信息的资源路径。
4.url-pattern：服务器内部使用的资源标识符。

URL、URI、url-pattern访问资源时的结构

url：http://192.168.64.3:8989/ems/login.html（供外部使用）
uri:/ems/login.html(通常供内部程序使用)
url-pattern：login.html(通常供内部程序使用)

6.访问web资源常见异常
1.404
在这里插入图片描述
产生原因：

1. url/uri/url-pattern资源路径编写错误，无法找到目标资源。
2. 该资源在服务器中不存在。

2.500 在这里插入图片描述
产生原因：

服务器应用程序运行时出现的错误，检查日志、控制台、代码。