网页设计基础——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. 抓到Dubbo异步调用的小BUG，再送你一个贡献开源代码的机会

    hello,大家好呀,我是小楼. 最近一个技术群有同学at我,问我是否熟悉Dubbo,这我熟啊~ 他说遇到了一个Dubbo异步调用的问题,怀疑是个BUG,提到BUG我可就不困了,说不定可以水,哦不.. ...

  2. 记一次 .NET 某工控数据采集平台 线程数 爆高分析

    一:背景 1. 讲故事 前几天有位朋友在 B站 加到我,说他的程序出现了 线程数 爆高的问题,让我帮忙看一下怎么回事,截图如下: 说来也奇怪,这些天碰到了好几起关于线程数无缘无故的爆高,不过那几个问题 ...

  3. 强化学习-学习笔记5 | AlphaGo

    本文不是论文阅读笔记,只是一个学习笔记,重在理解,在严谨程度上可能稍差. AlphaGo 论文指路: Mastering the game of Go with deep neural network ...

  4. System类的常用方法和StringBuilder的原理

    System类的常用方法1.currentTimeMillis方法2.arraycopy方法 java.lang.System 类中提供大量的静态方法,可以获取与系统相关的信息或系统级操作,在Syst ...

  5. java的类

    public class demo01 { public static void main(String[] args) { //类名可用中文也可用英文,但是不建议用中文 String 王者荣耀=&q ...

  6. Kubuntu安装字体

    打开设置,选择字体-字体管理器,再把网上下载好的ttf字体包解压,选择安装即可.(建议选为系统字体) Kubuntu20.04LTS

  7. HackerRank第一趴--Basic Select

    CITY表: Field Type ID number NAME VARCHAR2(17) COUNTRYCODE VARCHAR2(3) DISTRICT VARCHAR2(20) POPULATI ...

  8. pyhon推荐的命名规范

    类别 public Internal Modules(模块) low_with_under _low_with_under Packages(包) low_with_under   Classes(类 ...

  9. .Net CLR R2R编译的原理简析

    前言 躺平了好一段时间了,都懒得动了.本文均为个人理解所述,如有疏漏,请指正. 楔子 金庸武侠天龙八部里面,少林寺至高无上的镇寺之宝,武林人士梦寐以求的内功秘笈易筋经被阿朱偷了,但是少林寺也没有大张旗 ...

  10. JavaWeb--基本概念、Web服务器与Tomcat

    前言 Java Web 其实就是一个技术的总和,把Web看成一个容器而已主要使用JavaEE技术来实现.在加上各种中间件. 整个javaWeb阶段的内容通过实际的案例贯穿学习, 所涉及到的技术知识点会 ...