文档章节

CSS知识点总结

o
 osc_hpzuj4e3
发布于 2019/05/29 14:36
字数 928
阅读 8
收藏 0

行业解决方案、产品招募中!想赚钱就来传!>>>

一.简介

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

样式定义如何显示 HTML 元素

分为外部样式表,内部样式表,内联样式

外部样式表:当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表(.css文件),可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表:当单个文件需要特别样式时,就可以使用内部样式表。可以在 head 部分通过 <style> 标签定义内部样式表。

<head>

<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

内联样式:当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式 

 

二.语法

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:

 

选择器通常是需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性(property)是希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

CSS选择器

选择器除了元素选择器外还有id选择器,类选择器,属性选择器等等

序号 选择器 含义
1. * 通用元素选择器,匹配任何元素
2. E 标签选择器,匹配所有使用E标签的元素
3. .info class选择器,匹配所有class属性中包含info的元素
4. #footer id选择器,匹配所有id属性等于footer的元素

1.元素选择器

最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。

如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

可以多个元素一起设置

h2,h1,p {color:gray;}

 

2.类选择器

通过元素class属性来选择应用样式

选择所有同类的元素

*.class {color:red;}
或
.class {color:red;}
注意class应为类名

结合元素来指定选择

p.important {color:red;}
h1.important {color:blue;}

注意class这里名为important

 

3.id选择器

与类选择器类似,不过是通过id来匹配

*#id {font-weight:bold;}
或
#intro {font-weight:bold;}
注意id应为id名,与类区别于前面是#号

id选择器也可以与类选择器一样,能结合元素来独立选择,

实例:
<p id="intro">This is a paragraph of introduction.</p>
<p id="intro">This is a paragraph of introduction.</p>
p#intro {font-weight:bold;}

 

4.属性选择器

属性选择使用[]来标记,例如

#所有还有title属性
*[title] {color:red;}

#只对有 href 属性的锚(a 元素)应用样式
a[href] {color:red;}

#根据多个属性进行选择
a[href][title] {color:red;}

#选择有特定属性值的元素
a[href="url"] {color: red;}

CSS选择器在selenium定位元素也非常有用

其它选择器详细参考这里,更详细的用法参考这里

 

三.css样式

具体参考http://www.w3school.com.cn/cssref/index.asp

背景样式:http://www.w3school.com.cn/css/css_background.asp

文本样式:http://www.w3school.com.cn/css/css_text.asp

字体样式:http://www.w3school.com.cn/css/css_font.asp

链接样式:http://www.w3school.com.cn/css/css_link.asp

列表样式:http://www.w3school.com.cn/css/css_list.asp

表格样式:http://www.w3school.com.cn/css/css_table.asp

轮廓:http://www.w3school.com.cn/css/css_outline.asp

 

摘于https://www.runoob.com/css/css-tutorial.htmlhttp://www.w3school.com.cn/css/index.asp

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
CSS Browser Selector

CSS Browser Selector 是一个小的 JS 库,可增强 CSS 的选择器功能,支持根据不同的操作系统和浏览器来编写指定的 CSS 代码,可检测浏览器、浏览器版本、平台、平台版本、设备、设备版本、m...

匿名
2013/01/17
2.8K
1
Web开发组件管理器--Bower

Bower 是一个针对Web开发的包管理器。该工具主要用来帮助用户轻松安装CSS、JavaScript、图像等相关包,并管理这些包之间的依赖。 功能有些类似于Component。不同之处是,Component是围绕Git...

匿名
2013/02/01
1.2W
2
网页抓取工具 --pyrailgun

这是一个非常简单易用的抓取工具 怎么使用? 首先你需要创建一个对应站点的规则文件 比如test.json { } 然后在代码里面把它作为一个任务加入到railgun from railgun import RailGun railgun =...

baizhongwei
2013/02/28
7.8K
0
视图各种动画效果

自定义视图变换的各种动画效果。其中包括:CALayer、UIViewAnimation、CATransition、CABasicAnimation、CAKeyframeAnimation、CAAnimationGroup、CATransform3D各个知识点实现的动画效果,实...

匿名
2013/03/21
1.4K
0
Chrome页面自动刷新插件--smartF5

smartF5是一款chrome插件,用以实现监控页面资源,并自动刷新。 特别适合双屏情况下的DEMO开发,大大提高页面开发效率。 让你键盘上的F5键退休吧! 为什么选择smartF5 本插件具有以下特色: ...

YanisWang
2013/04/04
1.2W
0

没有更多内容

加载失败,请刷新页面

加载更多

matplotlib基础绘图命令之imshow

欢迎关注”生信修炼手册”! 在matplotlib中,imshow方法用于绘制热图,基本用法如下 import matplotlib.pyplot as plt import numpy as np np.random.seed(123456789) data = np.random...

庐州月光
昨天
0
0
[Bazel]自定义工具链

1 前言 2 Non-Platform 方式 3 Platform 方式 3.1 平台 3.2 工具链 3.3 Platform + Toolchain 实现平台方式构建 4 小结 1 前言 本文会讲述 Bazel 自定义工具链的两种方式,Platform 和 Non-...

别打名名
前天
0
0
浏览器在输入URL后,到底发生了什么?

这是一道面试会经常问的问题,平时虽然很常见的操作,但是探究其底层原理,可能并不是一件简单的事情,于是我从各处搜罗整理下全过程,在这里做分享。 第一步:浏览器输入域名 例如输入:www...

lintao111
前天
0
0
通过注解的方式整合 MyBatis + Spring Boot

目录 目录 1. 前言 2. 整合过程 2.1 新建 Spring Boot 项目 2.2 添加 pom 依赖 2.3 准备数据库 2.4 pojo 层 2.5 dao 层 2.7 controller 层 2.8 入口程序配置 2.9 网页测试 1. 前言 本篇博客主...

村雨遥
前天
0
0
字节跳动AI Lab 秋季正式批招聘

0 1 公司简介 字节跳动AI Lab,成立于2016年,致力于开发为字节跳动内容平台服务的创新技术,不仅仅是进行理论研究,我们的想法还可以通过实验证明和快速跟踪用于产品部署。 人工智能涉及的研...

我爱计算机视觉
前天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部