网页设计基础——CSS常用语法

 

 

 

一、注释；

例如：

/* 在此处书写注释 */

 

 

二、清除浏览器默认设置；

例如：

*{						/* 全局声明 */

    margin: 0;

    padding: 0;

}

 

 

三、CSS选择器；

 

1.标记选择器

<html>

	<head>

		<style>

    		p{

                font-size: 30px;

            }

		</style>

	</head>

	<body>

		<p>标记选择器</p>

	</body>

</html>

 

2.类别选择器

<html>

	<head>

        <style>

            .m{

                font-size=30px;

            }

        </style>

    </head>

    <body>

        <p class="m">类别选择器</p>

    </body>

</html>

 

3.ID选择器

<html>

	<head>

        <style>

            #m{

                font-size=30px;

            }

        </style>

    </head>

    <body>

        <p id="m">类别选择器</p>

    </body>

</html>

 

4.集体声明

<html>

	<head>

        <style>

            h1, #m{

                font-size=30px;

            }

        </style>

    </head>

    <body>

        <h1>一级标题</h1>

        <p id="m">类别选择器</p>

    </body>

</html>

 

5.后代选择器

规则：

  1. 用来选择元素或元素组的所有后代元素。

 

例如：

<html>

	<head>

        <style>

			ul{color:#00FFFF;}

			ul li{color:#FF0000;}			/* 所有li标签内的文本颜色都为红色 */

        </style>

    </head>

    <body>

        <ul>蓝色<li>红色</li>红色</ul>

        <ul>蓝色<ol>蓝色<li>红色</li>蓝色</ol>蓝色</ul>

    </body>

</html>

 

6.子元素选择器

规则：

  1. 与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。
  2. 如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器

 

例如：

<html>

	<head>

        <style>

			ul{color:#00FFFF;}

			ul>li{color:#FF0000;}			/* 第二个ul标签里“li标签内的文本颜色”不为红色 */

        </style>

    </head>

    <body>

        <ul>蓝色<li>红色</li>红色</ul>

        <ul>蓝色<ol>蓝色<li>蓝色</li>蓝色</ol>蓝色</ul>

    </body>

</html>

 

7.伪类选择器

规则

  1. 鼠标选中元素的各种状态。

 

例如：

<html>

	<head>

		<style>

			a:link {color: black;}				/* 访问之前的情况 */

			a:visited {color: green;} 			/* 访问过的情况 */

			a:hover {color: red;}				/* 鼠标悬停 */

			a:active {color: gray;}				/* 鼠标按下，尚未放开的情况 */

		</style>

	</head>

	<body>

		<a href="#">这是一个链接</a>

	</bpdy>

<html>

 

 

四、字体样式；

 

1.字体类型

规则：

  1. 若和下面的代码一样同时声明多个字体名称，则浏览器会先寻找“楷体”，若没找到则会继续寻找“宋体”，若代码所声明的所有字体都没有找到，则使用浏览器默认字体显示。

 

例如：

font-family: "楷体", "宋体";

 

2.字体大小

font-size: 8px;

 

3.字体粗细

font-weight: 800;

 

4.字体颜色

color: #FF0000;			/* 红色 */

color: #000000;			/* 黑色 */

color: #FFFFFF;			/* 白色 */

color: #0000FF;  		/* 蓝色 */

color: #FFFF00; 		/* 黄色 */

 

5.文字对齐

text-align: center;				/* 居中对齐 */

text-align: left;				/* 靠左对齐 */

text-align: right;				/* 靠右对齐 */

 

6.字体样式

font-style: italic;					/* 斜体 */

text-decoration: underline;			/* 下划线 */

text-decoration: overline;			/* 上划线 */

text-decoration: line-through;		/* 删除线 */

 

7.英文字母大小写

text-transform: capitalize;			/* 单词首字母大写 */

text-transform: uppercase;			/* 全部字母大写 */

text-transform: lowercase;			/* 全部字母小写 */

 

 

五、背景；

 

1.背景颜色

background-color: #FF0000;

 

2.背景图片

background-image: url(xxx.jpg);

 

3.背景图片大小

background-size: 500px 200px;		/* 宽度 高度 */

 

4.背景图片平铺

background-repeat: repeat;		/* 平铺 */

background-repeat: no-repeat;	/* 不平铺 */

background-repeat: repeat-x;	/* 水平平铺 */

background-repeat: repeat-y;	/* 垂直平铺 */

 

5.背景图片位置

background-position: center center;		/* 居中 */

background-position: 50% 50%;			/* 居中 */

background-position: 200px 100px;		/* 平面直角坐标系 */

《网页设计基础——CSS常用语法》的更多相关文章

  1. 简单物联网：外网访问内网路由器下树莓派Flask服务器

    最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...

  2. 利用ssh反向代理以及autossh实现从外网连接内网服务器

    前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...

  3. 外网访问内网Docker容器

    外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...

  4. 外网访问内网SpringBoot

    外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...

  5. 外网访问内网Elasticsearch WEB

    外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...

  6. 怎样从外网访问内网Rails

    外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...

  7. 怎样从外网访问内网Memcached数据库

    外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...

  8. 怎样从外网访问内网CouchDB数据库

    外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...

  9. 怎样从外网访问内网DB2数据库

    外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...

  10. 怎样从外网访问内网OpenLDAP数据库

    外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...

随机推荐

  1. Golang仿云盘项目-2.2 保留文件元信息

    本文来自博客园,作者:Jayvee,转载请注明原文链接:https://www.cnblogs.com/cenjw/p/16459817.html 目录结构 E:\goproj\FileStorage ...

  2. 解读Go分布式链路追踪实现原理

    摘要:本文将详细介绍分布式链路的核心概念.架构原理和相关开源标准协议,并分享我们在实现无侵入 Go 采集 Sdk 方面的一些实践. 本文分享自华为云社区<一文详解|Go 分布式链路追踪实现原理& ...

  3. 如何在Excel批量查询电话号码归属地？

    手机号码归属地的重要性大家应该都清楚,如果取消或者更改手机号码归属地,那么一会增加用户的被诈骗风险;二是对套餐资费会产生影响,加剧企业间的竞争,加剧数字鸿沟;三是企业运营管理需要投入大量人力物力,是个 ...

  4. NOI / 2.3基本算法之递归变递推-6262:流感传染

    OpenJudge - 6262:流感传染http://noi.openjudge.cn/ch0203/6262/ 6262:流感传染​​​​​​ 总时间限制: 1000ms 内存限制: 65536k ...

  5. idea插件和springboot镜像

    主题 https://blog.csdn.net/zyx1260168395/article/details/102928172 springboot镜像 http://start.springboo ...

  6. Vector3类定义

    大家一定要先看书,在看我的随笔啊.不然不知道原理的.而且我是不写教程的,只是写笔记怕自己忘记了. 我把所有的基础类放在了名叫geometry的文件中,包含Vector3, Normal3, Point ...

  7. Apache DolphinScheduler 需要的sudo，还可以这么玩，长见识了！

    Apache DolphinScheduler(incubator)需要的sudo,还可以这么玩,长见识了! 在新一代大数据任务调度 - Apache DolphinScheduler(以下简称dol ...

  8. Spring源码 15 IOC refresh方法10

    参考源 https://www.bilibili.com/video/BV1tR4y1F75R?spm_id_from=333.337.search-card.all.click https://ww ...

  9. 关于linux的一点好奇心（四）：tail -f文件跟踪实现

    关于文件跟踪,我们有很多的实际场景,比如查看某个系统日志的输出,当有变化时立即体现,以便进行问题排查:比如查看文件结尾的内容是啥,总之是刚需了. 1. 自己实现的文件跟踪 我们平时做功能开发时,也会遇 ...

  10. 根节点选择器和 html 选择器

    CSS 中除了用标签选择器选中<html>标签以外还有一个等价的是:root选择器.CSS 变量是有作用域的,全局变量都可以声明在<html>里. <div class= ...