网页设计基础——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. 微信开发在Pc端调用公众号粉丝发送过来的图片素材

    因为项目要在PC端搞一个微信墙功能,就是把粉丝发送过来的上墙内容给展示出来,但因为微信对微信素材进行了防盗链加密处理,所以在非微信页面上直接引用在微信服务器上的图片的链接是无法显示的,只会显示一张微信 ...

  2. 自己写雪花算法IdWorker

    package com.aiyusheng.shopping.util; import java.lang.management.ManagementFactory; import java.net. ...

  3. Eolink 全局搜索介绍【翻译】

    随着前后端分离成为互联网项目开发的标准模式, API 成为了前后端联通的桥梁.而面对越来越频繁和复杂的调用需求,项目里的 API 数量也越来越多,我们需要通过搜索功能来快速定位到对应的 API来进行使 ...

  4. 免费SSL证书申请及部署实践

    网络上关于如何签发免费SSL证书的博文一大片,但是真正操作起来的能让新手不迷惑的却很少,很多操作步骤受限于国内无法访问外网的阻碍,导致无法真正实施成功. 实际上,关于申请免费SSL证书主要涉及两大部分 ...

  5. 【设计过程】.NET ORM FreeSql WhereDynamicFilter 动态表格查询功能

    前言 最近几乎每天40度,越热越不想面对电脑,还好开源项目都比较稳定没那么多待解决问题,趁着暑假带着女儿学习游泳已略有小成.游泳好处太多了,建议有孩子的都去学学,我是在岸边指导大约一周左右就学会了,目 ...

  6. day04_数组

    数组 学习目标: 1. jvm内存图入门 2. 一维数组的使用 3. 二维数组的使用 4. 数组的内存结构 5. 数组中常见算法 6. 数组中常见的异常 一.JVM内存图入门 java程序运行在jvm ...

  7. cookie和seesion的区别和联系

    今天来聊聊cookie和session的区别和联系.首先先确定一个各自的定义吧: cookies: 网站用于鉴别用户身份和追踪用户登录状态. 存在于浏览器端的一小段文本数据 session: 中文称之 ...

  8. 算法竞赛进阶指南0x35高斯消元与线性空间

    高斯消元 目录 高斯消元 ACWing207. 球形空间产生器(点击访问) 求解思路 代码 ACWing208. 开关问题(点击访问) 思路 代码 总结 欣赏 线性空间 定义 ACWing209. 装 ...

  9. 汽车锂电池行业为啥会选择钡铼BL200系列Profinet分布式IO

    近年来,全球新能源汽车的蓬勃发展促进了锂电池行业的发展.随着锂电池标准化程度的提高,电池和模块规格的标准化是未来的发展趋势,也促进了自动化模块生产线的发展. 锂电池模块生产线通过涂胶-电池堆叠-组装- ...

  10. YII的延迟加载

    类的映射表 use app\model\order \Yii::$classMap['app\models\Order'] = "D:\wamp\www\...\models\Order.p ...