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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lfdfhl/article/details/100586177

C语言自学完备手册(33篇)

Android多分辨率适配框架

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义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>标签引用即可,请看如下示例:

<head>
      <link rel="stylesheet" type="text/css" href="csstest.css" />
</head>

第三种:行内式写法

在这种写法中,直接在标签内使用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>

在本系列学习教程中了为了方便代码的展示故采用内嵌式写法,但是在实际开发中为了提高代码的可读性并且降低后期维护的成本,在书写CSS时强烈建议大家使用外链式写法。

展开阅读全文

没有更多推荐了,返回首页