HTML第二课——css

请关注公众号:自动化测试实战

 

先给大家提个建议,就是用sublime编辑器来编写。用其他的也无所谓,我只是建议,因为这个会帮你自动补全很多代码。

css概念

css层叠样式表。意思就是一层一层的叠加。作用就是让页面中的可视化标签变得好看。

css的三种写法

  • 内联式

通过标签里的style属性设置。

<!DOCTYPE html>
<html>
<head>    <meta charset="utf-8">    <title>Css</title>    <meta name="keywords" content="key1, key2">    <meta name="description" content="">
</head>
<body>    <!-- 这是注释 -->    <!--通过css改变文字颜色:color属性 -->    <div style="color: red; border: 1px solid red; display: inline;">This is a div tag</div>    <div style="color: rgb(15, 20, 220);">This is a div tag</div>    <div style="color: #ccff66;">This is a div tag</div>
</body>
</html>

颜色的书写方式:

    • 英文直接书写

    • rgb r: red, g: green, b: blue,所有颜色都是红绿蓝。取值0-255, rgb(0,0,0)就代表黑色,rgb(255, 255, 255)代表白色,rgb(0, 255, 0)代表绿色

    • 十六进制:前面要加#,比如#ccff00

以后都用十六进制写颜色。

 

  • 嵌入式

写在<head>里的<style>标签。

<!DOCTYPE html>
<html>
<head>    <meta charset="utf-8">    <title>Css</title>    <meta name="keywords" content="key1, key2">    <meta name="description" content="">    <style type="text/css">        /*            css的注释写法        */        div{
           border: 1px solid red;            
           display: inline;        
       }    </style></head><body>    <!-- 这是注释 -->    <!--通过css改变文字颜色:color属性 -->    <div>This is a div tag</div>
</body>
</html>

  • 引用式

 

通过head标签里的link标签的href属性引入外部的css文件。rel="stylesheet"是固定值,就这么写,如果你用sublime编辑器,这个是自动补全的。

文件结构:

css文件夹里面有一个index.css文件。

lesson2.html

<!DOCTYPE html>
<html>
<head>    <meta charset="utf-8">    <title>Css</title>    <meta name="keywords" content="key1, key2">    <meta name="description" content="">    <!--    <style type="text/css">        /*            css的注释写法        */        div{            border: 1px solid red;            display: inline;        }    </style> -->    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>    <!-- 这是注释 -->    <!--通过css改变文字颜色:color属性 -->    <div>这是一个div标签</div>
</body>
</html>

index.css

div{
   font-family: 'Microsoft Yahei';    
   font-size: 20px;    
   border: 1px solid red;    
   display: inline;
}

以后写css只用引用式;以后写css只用引用式;以后写css只用引用式

注意:如果你在css里写了样式,也在div标签里写了style,那样会有限选择div里面的style,这就是就近原则

明天接着讲css剩下的知识点,大家先消化一下上面的知识。

转载于:https://www.cnblogs.com/captainmeng/p/8983981.html

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

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

相关文章

工作306:.sync解决子组件改变自身值 父组件也改变自身数值

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-

修改MyEclipse/Eclipse左侧文字大小(MacOS/Windows)

一、Windows 首先找到 Eclipse/MyEclipse 的安装目录&#xff0c;然后找到如下目录&#xff1a; \plugins\org.eclipse.ui.themes_1.1.200.v20160815-0536\css\e4_basestyle.css 修改此 css 文件&#xff0c;添加如下内容&#xff1a; CTabFolder Tree{ font-size: 12px;} 二…

Kubernetes tutorial - K8S 官方入门教程

tutorials 教程 kubectl 的命令手册 1 Creating a Cluster 1.1 Using Minikube to Create a Cluster Kubernetes Clusters Kubernetes coordinates a highly available cluster of computers that are connected to work as a single unit. The abstractions in Kubernetes all…

uniapp增加百度统计代码(h5)

做了个微信公众号文章互相阅读的h5界面&#xff0c;http://mptask.wintp.top/&#xff08;只能微信浏览器打开&#xff09;&#xff0c;其中用到了统计代码&#xff0c;记录如下。 1、新建 tj.html 界面 可放置在项目的根目录&#xff0c;文件名称根据自己情况命名。 2、粘贴内…

前端学习(2847):css鼠标样式

<html><head><meta http-equiv"Content-Type" content"text/html; charsetutf-8" /><title>css鼠标样式</title></head><body><a href"####" style"cursor:pointer">hello world1<…

前端学习(2848):鼠标点击事件

<< 一起来做秒杀活动 >>一、分类 一般事件 页面相关事件 表单相关事件 滚动字幕事件 编辑事件 外部事件二、常用事件 示例 onclick onmouseover onmouseout onkeydown onerror onloadonsubmit onblur onfocus

2019年终总结-2020展望「持续更新至31号」

粗略的统计了一下&#xff0c;2019 在博客园发布了约 140 篇文章&#xff0c;写文章有一段时间了&#xff0c;最开始的初衷就是记录自己平时开发遇到的 Bug&#xff0c;能更快捷的调取笔记&#xff1b; 写着写着&#xff0c;迎来了第 52 个关注者… 2019 或许是自己最艰难的一年…

前端学习(2849):简单秒杀学习之浮动

1浮动和不浮动 2下移和卡住 3环绕 4清除浮动 5浮动实际应用

前端学习(2850):简单秒杀系统学习之绝对定位

<html><head><meta http-equiv"Content-Type" content"text/html; charsetutf-8" /><title>CSS绝对定位</title><style type"text/css">div{background-color: Red;width: 30px;height: 30px;}#box_relativ…

「声明」本博客自动采集于博客园-niceyoo

开启了 CSDN 的博客搬家功能&#xff0c;自动同步博客园的文章信息。 所以本博客200篇文章有时不予回复、望体谅。 博客园链接&#xff1a;https://www.cnblogs.com/niceyoo

django channels

一直都是用HTTP请求糊里糊涂的实现了一次请求&#xff0c;一次响应。最近尝试用Django这种框架实现websocket&#xff0c;用的是Django channels&#xff0c;结合官网给的例子&#xff0c;实现了日志动态展示到页面。源码地址: 但是对于其原理&#xff0c;却想研究一番。 先看一…

前端学习(2851):简单秒杀系统学习之相对定位

<html><head ><meta http-equiv"Content-Type" content"text/html; charsetutf-8" /><title>CSS相对定位</title><style type"text/css">div {background-color: Red;width: 30px;height: 30px;}#box_relat…

PLSQL执行SQL脚本文件「适用批量」- 工具使用篇

前言 开局一条狗&#xff0c;装备全靠打 这篇文章应该是 2019 年最后一文章了&#xff0c;分享一下 PLSQL 是如何执行 SQL 脚本文件的。 关于执行 SQL 文件&#xff0c;下方是自己经常使用的一种方式&#xff0c;同样适用于批量文件。 好了。废话少说&#xff0c;看正文吧。 正…

Angular路由——子路由

一、子路由语法&#xff1a; 二、实例 在商品详情页面&#xff0c;除了显示商品id信息&#xff0c;还显示了商品描述&#xff0c;和销售员的信息。 通过子路由实现商品描述组件和销售员信息组件展示在商品详情组件内部。 1、新建2个组件修改其内容 ng g component productDesc …

前端学习(2852):简单秒杀系统学习之鼠标点击方法

<html><head><meta http-equiv"Content-Type" content"text/html; charsetutf-8" /><title>css鼠标样式</title></head><body><a href"####" style"cursor:pointer">hello world1<…

我为什么会选择计算机专业之 《我的编程人生前传》

前言 今天是 2020 年的第一天 「1月1号 | 元旦」&#xff0c;新年的第一篇文章&#xff0c;突发奇想「放假闲的」&#xff0c;打算写一篇小学白话文 - 我为什么会选择计算机专业&#xff0c;同时也让大家更加了解我「骗关注」。 本文故事绝对真实&#xff0c;均为博主亲身经历&…

前端学习(2853):简单秒杀系统学习之页面事件

1页面编辑事件 2页面编辑事件 3表单事件 4页面相关事件

错误代码 insufficient-isv-permissions 错误原因: ISV权限不足

前言 PC网页吊起支付宝支付界面报了如下这么个错误&#xff1a; 我明明申请的支付宝支付功能列表的签约已经生效了呀&#xff01;怎么回事呢&#xff1f; 解决 支付宝商户中心&#xff1a;https://b.alipay.com/signing/productSetV2.htm?mrchportalwebServerhttps%3A%2F%2Fmr…

前端学习(2854):简单秒杀系统学习之settimeout

<html> <head><meta http-equiv"Content-Type" content"text/html; charsetutf-8" /><title>test</title></head> <body> <h1><font colorblue> 示范网页 </font> </h1> <p><…