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剩下的知识点,大家先消化一下上面的知识。

原文发布于微信公众号 - 自动化测试实战(gh_839e78b6ba28)

原文发表时间:2018-04-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏阮一峰的网络日志

IntersectionObserver API 使用教程

网页开发时,常常需要了解某个元素是否进入了"视口"(viewport),即用户能不能看到它。 ? 上图的绿色方块不断滚动,顶部会提示它的可见性。 传统的实现方法...

4086
来自专栏阮一峰的网络日志

jQuery最佳实践

上周,我整理了《jQuery设计思想》。 那篇文章是一篇入门教程,从设计思想的角度,讲解"怎么使用jQuery"。今天的文章则是更进一步,讲解"如何用好jQue...

3776
来自专栏陈满iOS

iOS·枚举与整型转换

某项目组之前的小伙伴开发的模块:某页面行距大小根据枚举类型进行设置,现在本人接受项目后,需要添加两个功能,一个按钮增大字体大小,一个按钮缩小字体大小。

5231
来自专栏Golang语言社区

厚土Go学习笔记 | 03. 数学运算的随机数

总是要有使用随机数的情况。这就需要使用math包。 package main import( "fmt" "math/rand" ) fun...

3106
来自专栏nummy

reStructuredtext快速入门

reStructuredText是一种reStructuredText是一种轻量级的文本标记语言,简单易读,所见即所得的文本标记语言。

812
来自专栏练小习的专栏

如何让一个层位于iframe之上.flash之上

蓝色理想 goos 摘录一段CSS参考手册的话: z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 注释:元素...

2119
来自专栏用户2442861的专栏

Python-OpenCV 处理图像(三):图像像素点操作

第一种办法就是将一张图片看成一个多维的list,例如对于一张图片im,想要操作第四行第四列的像素点就直接 im[3,3] 就可以获取到这个点的RGB值。

2432
来自专栏python学习路

五、XML与xpath--------------爬取美女图片 先用一个小实例开头吧(爬取贴吧每个帖子的图片)XML 和 HTML 的区别XML文档示例

除了正则表达式处理HTML文档,我们还可以用XPath,先将 HTML文件 转换成 XML文档,然后用 XPath 查找 HTML 节点或元素。 ----  先...

3754
来自专栏韩东吉的Unity杂货铺

零基础入门 32:修改组件的位置.宽高.旋转.缩放

已经不止一两个同学来问过我这个问题了,如何修改一个组件的位置啊,宽高啊,旋转啊,缩放啊之类的问题,鉴于好多同学都有这个疑问,我就单独把他抽出一个小分享内容列出来...

1072
来自专栏腾讯社交用户体验设计

面向未来的 CSS Variable

892

扫码关注云+社区

领取腾讯云代金券