网页设计基础——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. GaussDB(for MySQL) ：Partial Result Cache，通过缓存中间结果对算子进行加速

    摘要:华为云数据库高级内核技术专家详解GaussDB(for MySQL)Partial Result Cache特性,如何通过缓存中间结果对算子进行加速? 本文分享自华为云社区<GaussDB ...

  2. JavaWeb的技术体系

    客户端和服务器端的交互 browser/ server(B/S)浏览器/服务器. client/server(C/S)应用/服务器.

  3. SimpleMongoDbFactory类已经失效，被SimpleMongoClientDbFactory替代

    老版本的mongodbtemplate连接池的用法 spring: data: mongodb: address: 127.0.0.1:37017 replica-set: database: xxx ...

  4. java后端接受Vue传递的List

    Failed to resolve argument 1 of type 'java.util.List' org.springframework.web.bind.MissingServletReq ...

  5. 基于Caffe ResNet-50网络实现图片分类（仅推理）的实验复现

    摘要:本实验主要是以基于Caffe ResNet-50网络实现图片分类(仅推理)为例,学习如何在已经具备预训练模型的情况下,将该模型部署到昇腾AI处理器上进行推理. 本文分享自华为云社区<[CA ...

  6. Linux系列之进程管理

    前言 进程是正在运行的程序,Linux系统通常有数百个进程同时运行.本文就来介绍下Linux是如何进行进程管理的. 我们可以看到: 查看进程(Viewing processes) 查找进程(Findi ...

  7. python--函数--参数传入分类

    1. 位置参数 调用函数时传入实际参数的数量和位置都必须和定义函数时保持一致. 2. 关键字参数 好处:不用记住形参位置. 所谓关键字就是"键-值"绑定,调用函数时,进行传递. 特 ...

  8. Vue脚手架（CLI）第一天

    vue 1.脚手架的搭建(CLI) 1.1.下载nodejs,在官网, [nodejs官网地址][ https://nodejs.org/en/ ] 无脑下一步就可以了.环境自动安装 1.2.下载脚手 ...

  9. 删除MySQL数据用户

    mysql删除用户的方法: 1.使用"drop user 用户名;"命令删除: 2.使用"delete from user where user='用户名' and ho ...

  10. Excelize 发布 2.6.1 版本，支持工作簿加密

    Excelize 是 Go 语言编写的用于操作 Office Excel 文档基础库,基于 ECMA-376,ISO/IEC 29500 国际标准.可以使用它来读取.写入由 Microsoft Exc ...