讲给后台程序员看的前端系列教程(12)——CSS概述

最新推荐文章于 2024-07-28 22:30:50 发布

谷哥的小弟

最新推荐文章于 2024-07-28 22:30:50 发布

阅读量657

点赞数 1

分类专栏：讲给后台程序员看的前端系列教程文章标签： HTML CSS 常用属性

本文链接：https://blog.csdn.net/lfdfhl/article/details/100586177

版权

讲给后台程序员看的前端系列教程专栏收录该内容

63 篇文章 53 订阅

订阅专栏

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境，踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl

CSS简介

CSS即层叠样式表(Cascading Style Sheet)它主要用于网页样式设计，比如：文字的大小，颜色，元素的定位等等。CSS的诞生将页面架构和页面显示进行了分离，各司其责。尤其在HTML5中废除了以往的font标签，big标签，strike标签，建议开发人员把外观的控制交给CSS负责。

CSS样式规则

我们使用CSS对网页进行装饰，首先应了解其基本语法，其基本格式如下：

选择器 {属性1:值1;属性2:值2;属性3:值3.....}

选择器用于指定CSS样式作用的HTML对象，花括号{ }内是对该对象设置的具体样式。其中，属性及其对应的值是按照键值对的形式出现。属性是对指定对象设置的样式，例如：大小、颜色等。属性及其对应的值之间用:连接，多个键值对之间用;隔开。

示例如下：

h1{font-size:15px;color:red;}

在该示例中：CSS样式作用于HTML中的h1标签，即设置h1标签的字体大小为15px，文字颜色为red。

CSS语法规则

CSS中选择器严格区分大小写，属性及其值不区分大小写；但，一般情况下选择器，属性及其值均采用小写的方式
如果属性的值由多个单词组成且各单词之间包含空格则必须为此属性值加上双引号。例如：p{font-family:"Times New Roman";}
属性的值与其单位之间不能出现空格，例如：h2{font-size:20 px;}是错误的。
为提升代码的可读性，可在CSS中添加注释，例如：/* 这是注释 */

CSS常用属性

CSS拥有众多属性，在此介绍CSS常见属性

尺寸属性

在这里插入图片描述

背景属性

在这里插入图片描述
在CSS中常用设置背景的方式以及常用属性如下：

通过background-color设置背景颜色
通过background-image设置背景图片
通过background-repeat设置背景图片平铺
通过background-position设置背景图片位置
通过background-attachment设置背景图片固定

以上属性可单独设置，亦可综合设置，语法如下：

background:背景色 url(背景图片) 平铺 定位 固定

边框属性

在这里插入图片描述

文本属性

在这里插入图片描述

字体属性

在这里插入图片描述

外边距属性

在这里插入图片描述

内边距属性

在这里插入图片描述

表格属性

在这里插入图片描述

定位属性

在这里插入图片描述

CSS使用方式

在此介绍几种常用的CSS使用方式。

第一种：内嵌式写法

   <head>
       <style type="text/css">

         /*此处为CSS代码*/

       </style>
   </head>

在该写法中，将CSS样式写在<head></head>标签中。

第二种：外链式写法

与内嵌式写法中直接把CSS写在了<head></head>中不同，在外嵌式写法中是把CSS写在了专门的.css文件里，然后在html中通过<link>标签引用即可；该标签常用属性如下：

rel属性表示当前文档与被链接文档之间的关系，常用的为rel=“stylesheet”
type属性表示被链接文档的 MIME 类型，常用的为type=“text/css”
href属性表示被链接CSS文档的位置

请看如下示例：

<!DOCTYPE html>
<html>
   <head>
   	<meta charset="utf-8">
   	<title>index</title>
   	<link rel="stylesheet" type="text/css" href="css/csstest.css" />
   </head>
   <body>
   	<h1>绚丽的CSS</h1>
   </body>
</html>

csstest.css代码如下：

h1{
	color: green;
}

第三种：行内式写法

在这种写法中，直接在标签内使用style属性设置样式。请看如下示例：

	<body>

       <p style="color:blue; font-size:40px">欢迎访问我的博客。</p>
       <br>
       <p style="color:yellow; font-size:30px">谷哥的小弟</p>
       <br>
       <p style="color:red; font-size:50px">http://blog.csdn.net/lfdfhl</p>

   </body>