python web开发 CSS基础

文章目录

    • 1. 基础知识
    • 2. ID,Class 选择器
    • 3. CSS盒子模型
    • 4. 嵌入CSS样式
      • 4.1 内联样式表
      • 4.2 内部样式表
      • 4.3 外部样式表

learning from 《python web开发从入门到精通》

1. 基础知识

  • CSSCascading Style Sheet 层叠样式表,标记语言,用于为 HTML 定义布局(字体,颜色,边距,宽高,背景图片,定位)

语法结构:选择器 + 一条/多条 声明
p {color: red; font-size: 12px;}
css 声明总以; 结束,并用 {} 括起来
注释/**/ 开始和结束

2. ID,Class 选择器

  • id 选择器为标有特定 id 的 HTML 元素指定特定样式
    #para1 {text-align: center; color: red;} 将应用于元素属性 id="para1"
  • class 选择器 用于一组元素的样式,可用于多个元素,在CSS中以.号 显示
    .center {text-align: center;}拥有 center 类的 HTML 元素均为居中
    p.center {text-align: center;} 所有 p 元素使用 class="center"让该元素文本居中

3. CSS盒子模型

从外到内:

  • Margin 外边距(透明)
  • Border 边框
  • Padding 内边距(透明)
  • Content 内容:文本图像

4. 嵌入CSS样式

4.1 内联样式表

  • 使用 HTML 属性 style,仅影响被 style 属性包括着的元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Css样式</title>
</head>
<body>
<h1 style="text-align: center; color: red">michael 学习web开发</h1>
<p style="padding: 20px; background: rosybrown">盒子模型</p>
</body>
</html>

在这里插入图片描述

4.2 内部样式表

  • 在 HTML 文件内使用 <style> 标签,在文档头部<head> 标签内定义内部样式表
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内部样式表</title><style>h1 {text-align: center;color: blue;}p {padding: 20px;background: blueviolet;}</style></head>
<body><h1>michael 学习python web开发</h1><p>盒子模型</p></body>
</html>

在这里插入图片描述

4.3 外部样式表

  • 一个扩展名为 css 的文本文件,在 HTML 中指向要使用的 css 文件
    <link rel="stylesheet" type="text/css" href="style/dafault.css" />

mycss.css

h1{text-align: center;color: olivedrab;
}
p{padding: 20px;background: cornflowerblue;
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>外部样式表</title><link rel="stylesheet" type="text/css" href="mycss.css"/></head>
<body><h1>michael 学习python web开发</h1><p>盒子模型</p></body>
</html>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/471468.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

php fpm 统计,php实现fpm开启状态统计的方法

这篇文章主要给大家介绍了php-fpm开启状态统计的方法&#xff0c;文中介绍的非常详细&#xff0c;对大家具有一定的参考学习价值&#xff0c;需要的朋友们下面来一起看看吧。本文主要给大家介绍了关于php-fpm开启状态统计的相关内容&#xff0c;分享出来供大家参考学习&#xf…

shell脚本判断文件类型

转自&#xff1a;http://www.cnblogs.com/sunyubo/archive/2011/10/17/2282047.html 1. shell判断文件,目录是否存在或者具有权限 2. #!/bin/sh 3. 4. myPath"/var/log/httpd/" 5. myFile"/var /log/httpd/access.log" 6. 7. # 这里的-x 参数判断$myPath是…

python web开发 JavaScript基础

文章目录1. script 标签2. 字面量、变量3. 数据类型4. 运算符5. if 条件6. switch分支7. for循环8. while循环9. break&#xff0c; continue10. 函数11. JS事件12. 引入JS的两种方式12.1 HTML页面嵌入12.2 引入外部JS文件learning from 《python web开发从入门到精通》 JavaS…

php中括号的优先级是不是最高的,理解php中操作符的优先级和结合性

一般地说&#xff0c;操作符具有一组优先级&#xff0c;也就是执行他们的顺序。操作符还具有结合性&#xff0c;也就是同一优先级的操作符的执行顺序。这种顺序通常有从左到右(简称左)、从右到左(简称右)或者不相关。下表中给出的是php中的操作符和相关性简表&#xff0c;他们出…

Txt格式配置表无法解析的问题——BOM

今天再次遇到同一个问题&#xff1a;策划给来一个Txt格式配置表&#xff0c;我用解析类去读取&#xff0c;返回的结果为空。解析类参数是&#xff1a;主键key&#xff0c;文件名fileName&#xff0c;错误提示errorTip。 写读取语句的时候&#xff0c;主键key我是直接从txt文件中…

python web开发 jQuery基础

文章目录1. 引入 jQuery2. 基本语法3. jQuery 选择器3.1 元素选择器3.2 #id 选择器3.3 .class 选择器4. jQuery事件5. 获取内容和属性5.1 获取内容5.2 获取属性learning from 《python web开发从入门到精通》 jQuery 是一个轻量级的 JavaScript 函数库包含 元素选取&#xff0…

PHP动态验证,php-动态更改验证规则

我正在处理包含用户数据,特别是电话号码字段的表单.通常不需要电话号码,因此模型中唯一的验证规则是usphone规则.但是,如果用户正在提交此表格,则电话号码变得必不可少.我以为我可以在运行中简单地添加验证规则,设置模型并调用validates方法,但是我做错了或者没有按我预期的方式…

Html5 各属性详解

Div 这个标签是我们见得最多、用得最多的一个标签。本身没有任何语义&#xff0c;用作布局以及样式化或脚本的钩子(hook)。 Section section 应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。一个网站的主页可以分成简介、新闻和联系信息等几部分。…

python web开发 Bootstrap框架基础

文章目录1. 安装2. Bootstrap 5 基本应用learning from 《python web开发从入门到精通》 Bootstrap 是最受欢迎的 前端组件库&#xff0c;用于 HTML&#xff0c;CSS&#xff0c;JavaScript 开发的 开源工具集 1. 安装 使用 CDN 引用 <link href"https://cdn.jsdeli…

ubuntu memcached php,如何在 Ubuntu 18.04 上安装 Memcached

Memcached 是一个免费的开源高性能内存中键值数据存储。 它最常用于通过从数据库调用的结果缓存各种对象来加速应用程序。在本教程中&#xff0c;我们将介绍在 Ubuntu 18.04 上安装和配置最新版 Memcached 的过程。 相同的说明适用于 Ubuntu 16.04 和任何基于 Ubuntu 的发行版。…

window.cookie

本地测试cookie用火狐来测试 首先cookie是document上的一个属性。 先弹出一个cookie alert(document.cookie); //弹出是空的 设置cookie&#xff0c;格式是有一定要求的&#xff0c;格式是&#xff0c;名字值 这样的格式 所以设置的时候&#xff0c;这样设置 document.cook…

未知宽高元素的水平垂直居中

大致有4种方法实现&#xff1a; 一、table布局(display:table) 二、绝对布局&#xff08;position:absolute&#xff09;translate 三、转化为行内标签display:inline-block&#xff0c;借助另外一个标签高度来实现 四、通过js的获取标签的宽高来控…

python web开发 网络编程 TCP/IP UDP协议

文章目录1. TCP/IP协议1.1 IP协议1.2 TCP协议2. UDP协议3. Socket4. TCP编程4.1 创建TCP服务器4.2 创建TCP客户端4.3 简易聊天工具5. UDP编程5.1 创建UDP服务器5.2 创建UDP客户端learning from 《python web开发从入门到精通》 1. TCP/IP协议 大家都用同样的协议 protocol&am…

oracle批量联机,Oracle 12.2 使用联机重定义对表进行多处改变

下面的例子将演示如何使用联机重定义操作来对表进行多处改变&#xff0c;原始表jy.original的创建语句如下:SQL> create table jy.original(2 col1 number primary key,3 col2 varchar2(10),4 col3 clob,5 col4 date)6 organization index;Table created.表jy.original将按以…

python web开发 网络编程 HTTP协议、Web服务器、WSGI接口

文章目录1. HTTP协议2. Web服务器3. 静态服务器创建 web_server.py4. WSGI 接口4.1 CGI 通用网关接口4.2 WSGI4.3 定义 WSGI 接口4.4 运行 WSGI 服务learning from 《python web开发从入门到精通》 1. HTTP协议 应用层最主要的协议&#xff1a;HTTP协议&#xff08;HyperText…

php实现文字向左跑马灯,js实现文字跑马灯效果

js实现文字超过显示宽度每间隔1s自动向左滚动显示*{ margin:0; padding:0;}body{font:12px/1 微软雅黑;}.wrapper{font-size: 0.85rem; color: #333; padding-top: 0.75rem; margin: 0 0.75rem; white-space: nowrap; overflow: hidden;width: 300px;}.inner{ width:1000px;ove…

android 75 新闻列表页面

new.xml <?xml version"1.0" encoding"UTF-8" ?> <newslist><news><title>黑马52期就业快报</title><detail>热烈祝贺黑马52期平均薪水突破13k</detail><comment>15687</comment><image>ht…

python web开发 MySQL数据库基础

文章目录1. 简介2. 下载安装3. 操作 MysQL 数据库3.1 创建数据库3.2 选择数据库3.3 查看数据库3.4 删除数据库4. 数据类型5. 操作 MysQL 数据表5.1 创建数据表5.2 查看表的结构5.3 修改表的结构5.4 删除数据表6. 操作 MySQL 数据表记录6.1 添加数据6.2 查询、修改、删除learnin…

oracle计算每月最小工作日,Oracle计算指定日期内的工作日(不包含周末)

1、获取当天是礼拜几&#xff1a;select to_char(sysdate,d) from dual; --礼拜天为1&#xff0c;礼拜一为2&#xff0c;类推2、获取 两个时间段间的 工作日&#xff1a;select (trunc(&end_dt - &start_dt) -((caseWHEN (8 - to_number(to_char(&start_dt,D))) &g…

简单几何(极角排序) POJ 2007 Scrambled Polygon

题目传送门 题意&#xff1a;裸的对原点的极角排序&#xff0c;凸包貌似不行。 /************************************************ * Author :Running_Time * Created Time :2015/11/3 星期二 14:46:47 * File Name :POJ_2007.cpp******************************…