htCSS简介

什么是CSS？

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

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

3、样式通常存储在样式表中

4、外部样式表可以极大提高工作效率

5、外部样式表通常存储在 CSS 文件中

6、多个样式定义可层叠为一个

样式解决了一个很大的问题

HTML 标签原本被设计为用于定义文档内容，如下实例：

<h1>这是一个标题</h1>
<p>这是一个段落</p>

样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。

CSS语法

CSS实例

CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来

p {color:red;text-align:center;}

例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {color: red; text-align: center;}</style>
</head>
<body><p>hello world!</p><p>加油！WEB安全</p>
</body>
</html>

CSS注释：以/*开始，以*/结束

CSS Id 和 Class

id 和 class 选择器

如果要在HTML元素中设置CSS样式，需要在元素中设置"id" 和 "class"选择器。

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式

HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 “#” 来定义

例子：以下的样式规则应用于元素属性 id = “para1”：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#para1 {color: red; text-align: center;}</style>
</head>
<body><div id="para1">hello world!</div><p>加油！WEB安全</p>
</body>
</html>

注意：ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于 id 选择器，class 可以在多个元素中使用。

class 选择器在 HTML 中以class属性表示，在 CSS 中，类选择器以一个点 “.” 显示

以下例子中，所有拥有 center 类的 HTML 元素均为居中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.center {color: red; text-align: center;}</style>
</head>
<body><div class="center">hello world!</div><div class="center">加油！WEB安全</div>
</body>
</html>

也可以指定特定的HTML元素使用class。

在以下实例中, 所有的 p 元素使用 class=“center” 让该元素的文本居中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p.center {color: red; text-align: center;}</style>
</head>
<body><p class="center">hello world!</p><h1 class="center">加油！WEB安全</h1>
</body>
</html>

类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

CSS 创建

三种方式：

1、页内样式：放在head之间，用style标记

2、行内样式：放在标记的style属性里，行内样式优先级最高

3、外部样式：放在独立的 .css 文件中，在网页上用 link 标记引入

一般常用于外部样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS代码放的位置</title><!--引入外部CSS文件--><link rel="stylesheet" href="test.css"><style>div{color: red;}</style>
</head>
<body><h1>CSS代码位置1(页内样式)：放在head之间，用style标记</h1><div>hello world!</div><h1>CSS代码位置2(行内样式)：放在标记的style属性里 </h1><p style="color: green; font-size:20px">真实的故事</p><h3>CSS代码位置3(外部样式)：放在单独的CSS文件中</h3><input type="text" id="uname">
</body>
</html>

#uname{width: 300px;height: 50px;
}

CSS Backgrounds(背景)

背景（颜色background-color）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景样式</title><style>#subBtn{color: white;background-color: orange;width: 134px;height: 31px;}#mydiv{background-color: blue;width: 400px;height: 400px;}</style>
</head>
<body><div id="mydiv"></div><input  type="submit" id="subBtn" value="下一步">
</body>
</html>

CSS Text(文本)

文本样式（ color \ text-align \ text-decoration ）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本样式</title><style>.nuc{color: red;text-align: center;text-decoration: underline;}#my{text-decoration: line-through;}a{text-decoration: none;}</style>
</head>
<body><p class="nuc">hello world</p><p id="my">XXX的录取offer</p><a href="">太原市科技局</a>
</body>
</html>

CSS Fonts(字体)

字体样式（font-family \ font-size）

网页上的文字默认是16px；在工程上，网页上的文字一般是12px或14px

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字体样式</title><style>.myflag{font-family: "仿宋";font-size: 40px;}</style>
</head>
<body><p class="myflag">这是一个段落</p>
</body>
</html>

CSS 链接(link)

链接样式(a:hover)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>超链接样式</title><style>a {text-decoration: none;}a:hover{color: red;font-size: 50px;}p {text-align: center;}</style>
</head>
<body><p><a href="http://www.baidu.com">百度官网</a></p>
</body>
</html>

CSS Table(表格)

表格样式（细线表格 border-collapse：collapse）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格样式</title><style>table {width: 500px;height: 80px;text-align: center  ;}/*给table，tr，td 同时施加样式*/table,tr,td {/*边框宽度1px、实线、黑色*/border: 1px solid black;}table {/*边框折叠起来，不要有空心*/border-collapse: collapse;}a {text-decoration: none;}a:hover{color: red;}</style>
</head>
<body><table align="center" border="1"><tr><td>学号</td><td>姓名</td><td>籍贯</td><td>操作</td></tr><tr><td>040846</td><td>王龙</td><td>山西</td><td><a href="#">修改</a> &nbsp; &nbsp; &nbsp;<a href="#">删除</a> </td></tr>   <tr><td>040846</td><td>王龙</td><td>山西</td><td>修改 删除</td></tr>    <tr><td>040846</td><td>王龙</td><td>山西</td><td>修改 删除</td></tr> </table>
</body>
</html>

CSS border(边框)

border-radius 边框四个角带弧度

边框变红 border：1px solid red

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>边框样式</title><style>#uname {border: 1px solid red;width: 220px;height: 35px;/*边框四个角带弧度*/border-radius: 5px;}#mydiv {border: 1px solid blue;width: 500px;height: 500px;}</style>
</head>
<body>用户名<input type="text" id="uname"><br><div id="mydiv">这是小学期实训</div>
</body>
</html>

CSS盒子模型

1、与网页布局密切相关

2、美工必须精通

3、开发工程师理解并会用

4、重要：外边距 margin、内边距padding；内外边距是相对的，看站在哪一方面来说。边距有4个方向：上下左右

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS盒子模型</title><style>#firstDiv {width: 480px;height: 480px;border: 1px solid red;padding-top: 30px;padding-left: 50px;margin: 0 auto;   /*让Div居中*/}#secondDiv {width: 260px;height: 260px;border: 5px solid cyan;padding-top: 30px;}#loginBtn {margin-top: 30px;margin-left: 20px;}</style>
</head>
<body><div id="firstDiv"><div id="secondDiv"><button id="loginBtn">登录按钮</button></div></div>
</body>
</html>

登录网页

1、用到了盒子模型（内部外部边距等）

2、HTML 表单元素（用户名、密码、登录按钮）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>教务系统登录</title><style>body {background-color: #1e9fff;}#loginDiv{background-color: white;width: 480px;height: 390px;margin: 0 auto;color: #1e9fff;margin-top: 150px;text-align: center;padding-top: 20px;}#uname {width: 400px;height: 35px;border-radius: 5px;border: 1px solid lightgray;margin-left: -30px;background-color: transparent;padding-left: 30px;}#upsw {width: 400px;height: 35px;border-radius: 5px;border: 1px solid lightgray;margin-left: -30px;background-color: transparent;padding-left: 30px;margin-top: 18px;}#loginBtn{width: 430px;height: 35px;margin-top: 11px;background-color: #1e9fff;border: 1px solid #1e9fff;border-radius: 5px;color: white;}</style>
</head>
<body><div id="loginDiv"><h1>UOLab联合开发实验室管理平台</h1><img src="data:images/usr.png"><input type="text" id="uname" name="username"><br><img src="data:images/password.png"><input type="password" id="upsw" name="userpsw"><br><button id="loginBtn">登录</button></div>
</body>
</html>

CSS显示

1、dispaly

2、visibility

面试题：上面的两个有何区别？

dispaly：隐藏后，释放区域

visibility：隐藏了，但区域还在，不释放

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS显示与隐藏</title><style>.picDiv { /* display: none;*/  /*不显示、隐藏*/visibility: hidden;}</style>
</head>
<body><h1>Hello</h1><div class="picDiv"><img src="D:/桌面/图片/canvas4.png" width="500px" height="500px"></div><h1>World</h1>
</body>
</html>

CSS浮动(float)

主要用于：网页布局（ CSS + DIV ）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS浮动</title><style>#firstDiv {width: 300px;height: 80px;background-color: yellow;float: left;    /*让第一个div浮动起来，脱离流*/}#secondDiv {width: 410px;height: 80px;background-color: blue;float: left;}#thirdDiv {width: 230px;height: 100px;background-color: red;float: left;}#fourthDiv {width: 290px;height: 80px;background-color: darkgreen;}</style>
</head>
<body><div id="firstDiv">这是1个div</div>    <div id="secondDiv">这是2个div</div>    <div id="thirdDiv">这是3个div</div>    <div id="fourthDiv">这是4个div</div>
</body>
</html>

CSS + DIV做网页布局离不开浮动，看网页效果，返回来理解用意

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>管理系统布局示意-CSS+DIV</title><style>#topDiv {height: 40px;width: 100%;background-color: blue;}#leftDiv {width: 120px;height: 360px;background-color: yellow;float: left;}#rightDiv {width: 100%;height: 360px;background-color: deepskyblue;}</style>
</head>
<body><div id="container"><div id="topDiv"><h1 style="color:white">hello</h1></div><div id="leftDiv"></div><div id="rightDiv"></div></div>
</body>
</html>

浅学 --------- CSS相关推荐

python爬虫笔记——Scrapy框架(浅学)
一.创建Scrapy爬虫项目步骤: 安装scrapy:在pycharm项目(自己新建的爬虫项目)的终端输入 pip install scrapy 创建爬虫项目:同样在终端输入 scrapy star ...
DO、DTO、BO、VO、POJO等各种O浅学（总结）
DO.DTO.BO.VO.POJO等各种O浅学(总结) 有哪些 O 关键的 O :DO.DTO.VO.BO 整个数据流程传递区别用处 VO与DTO的区别 VO与DTO的应用 DTO与DO的区别 DT ...
[大数据之Yarn]——资源调度浅学
在hadoop生态越来越完善的背景下,集群多用户租用的场景变得越来越普遍,多用户任务下的资源调度就显得十分关键了.比如,一个公司拥有一个几十个节点的hadoop集群,a项目组要进行一个计算任务,b项目 ...
浅学JavaScript
JavaScript是互联网上最流行的脚本语言,可广泛用于服务器.PC.笔记本电脑智能手机等设备: 对事件的反应: <!DOCTYPE html> <html> <hea ...
css html 双面打印_CSS语法与规则 — 重学CSS
我是三钻,一个在<技术银河>中等你们一起来终生漂泊学习. 点赞是力量,关注是认可,评论是关爱!下期再见 ! 前言进入重学 CSS 的第一步,首先需要找到一些线索.我们在前面的课程中讲学习 ...
html css 命名规范,浅谈css命名规则(新手必看)
头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left rig ...
TencentOS浅学过程记录
TencentOS浅学过程记录前言一.RTOS 二.学习资料来源三.初步学习过程中的疑难问题解决任务调度以及轮询时间片消息队列与邮箱队列互斥锁任务中为什么一定要加while(1)循环内 ...
【科研】浅学Cross-attention？
Cross-Attention in Transformer Architecture 最近,CrossViT让我所有思考,这种能过够跨膜态的模型构建?浅学一下吧! 目录 1.Cross attent ...
css中字体下划线样式,css下划线浅谈css自定义下划线
使用css样式对一段文字或一段文字中其中几个文字设置虚线效果的下划线如何实现?我们知道css字体下划线使用text-decoration样式实现,而虚线下划线则不能使用此css样式属性.要实现通过下边 ...
Web前端之浅谈css
Web前端之浅谈CSS CSS 什么是CSS? CSS的三种引用方式 CSS常用选择器介绍选择器权重字体属性文本属性元素分类 display属性: 块状元素行内元素行内块元素盒模型内边 ...

浅学 --------- CSS