CSS 初级攻略

内容来自html dog.

css的格式为 ‘property: value

给html插入css样式的方式有三种:内联、内部css、外部css文件,如下所示:

<p style="color: red">text</p>
<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<style>

    p {
        color: red;
    }

    a {
        color: blue;
    }

</style>
...
<!DOCTYPE html>
<html>
<head>
    <title>My first web page</title>
    <link rel="stylesheet" href="style.css">
</head>
...

css要设定html的样式,首先必须先获得html元素的选择器,

最简单的选择器就是直接使用html元素名称,如下所示

css中的度量单位:

css中的颜色:

分为两种表示方式,还有一些预定义的颜色,css3还会有一些高级设置。

css中的文字

不同的计算机中有不同的字体,有时候你设置的字体在其它计算机上是无效的。

但是也有那么些安全的字体,比如:Arial,Verdana、Times New Roman等

比较保险的方法是设置多个字体(用逗号分割),这样浏览器在找不到第一种字体的情况下就会去寻找第二种字体、依次下去

需要注意的是,如果字体多于一个字,那么应该把它放进双引号里,如font-family: "Times New Roman"

下面是字体相关的几个css属性:

补充:font-size是修改文字大小,各种划线是text-decoration,在整体样式上还有一些如下

不过我想应该不会经常用。。。

时间: 2024-11-05 18:36:04

CSS 初级攻略的相关文章

新手学web前端有哪些攻略?

web前端入行门槛低.薪资高.发展前景好,已经成为近几年的热门岗位,很多人在想要转行时也会首选web前端.想要学好web前端,尤其是对于没有任何基础的新手来说,一定要找到好的学习方法.下面小编就为大家分享一下前端新手学习的攻略有哪些? 第一:基础的重要性 无论做什么都一定要有扎实的基础,参加web前端开发培训也不例外,只有基础牢固,才能更深入的学习新技能.作为一名初级的web前端工程师,你必须要具备基础的技术要素:html.CSS和Java.这是作为web前端工程师所必须要掌握的.web前端的入

移动端点击事件全攻略,有你知道与不知道的各种坑

看标题的时候你可能会想,点击事件有什么好说的,还写一篇攻略?哈哈,如果你这么想,只能说明你too young to simple. 接触过移动端开发的同学可能都会面临点击事件的第一个问题:click事件的300ms延迟响应.不能立即响应给体验造成了很大的困扰,因此解决这个问题就成为了必然. 这个问题的解决方案就是: zepto.js的tap事件.tap事件可以理解为在移动端的click事件,而zepto.js因为几乎完全复制jQuery的api,因此常常被用在h5的开发上用来取代jquery.

redis大型攻略!

redis大型攻略 一:redis的简介.下载和安装 二:redis主从 三:redis在线升级 四:redis多实例 五:redis常见的操作 六:reids配置详解 实验环境:CentOS-6.5-x86_64   redis-2.8.9.tar.gz 一:redis的简介.下载和安装 Redis是一个key-valu存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted set --有序集

程序员技术练级攻略

以下全文来自http://coolshell.cn/articles/4990.html 前言 你是否觉得自己从学校毕业的时候只做过小玩具一样的程序?走入职场后哪怕没有什么经验也可以把以下这些课外练习走一遍(朋友的抱怨:学校课程总是从理论出发,作业项目都看不出有什么实际作用,不如从工作中的需求出发) 建议: 不要乱买书,不要乱追新技术新名词,基础的东西经过很长时间积累而且还会在未来至少10年通用. 回顾一下历史,看看历史上时间线上技术的发展,你才能明白明天会是什么样. 一定要动手,例子不管多么简

前台页面优化全攻略(三)

经过前两篇文章的实践,你的网站加载速度一定有了非常明显的变化.能把实践跟到这篇文章的人想必一定是极客中的极客.如果你仍对网站的加载速度不满意,可以看看再尝试一下本文中几近疯狂的终极优化方案. 你可以对网站进行快速的优化,但网站日常的节食却很难.也许你已经花了很大的力气去优化你的CSS和JavaScript代码,但是你所做的努力马上又会因为老板或客户期望的新功能而付之东流.所以看来不论是人还是网页,减肥都贵在坚持. 这篇终极减肥方案可能不适合所有的网站,但是我相信它可以引起你对网页大小的重视. 1

前台页面优化全攻略(四)

通过前几篇文章,你应该已经掌握了很多优化网站的方法.现在你的网站加载速度已经很快了,但是你必须持续的监控你的网站,了解它的大小变化,要不然一段时间过去之后,它可能又成为了一个胖子. 如今每个页面平均已经达到1.7M,每年增长大概32%.你可以通过以下几个工具来查看你的网站是不是又在暴饮暴食,而且它们都是免费的. 1. Pingdom Pingdom是我喜欢的一个在线测试工具.它会揭露出所以你想知道的细节,你可以一清二楚的看到网站的现状:重量.加载速度.代码分析.性能评分.开发者建议,它还提供了一

javascript 操作 excel 全攻略

最近做一个项目,用到了javascript操纵excel以生成报表,下面是标有详细注解的实例 <html> <head><script language="javascript" type="text/javascript"> </script><script language="javascript" type="text/javascript">function

Angularjs中UI Router全攻略

摘自:Angularjs中UI Router全攻略 温馨提示:想要了解 angular-ui-router的同学,从上往下读一遍,能带随着coding那就更好了,保证你对angular-ui-router基本全部掌握. 如何引用依赖angular-ui-router angular.module('app',["ui.router"]) .config(function($stateProvider){ $stateProvider.state(stateName, stateCofi

3D计算机图形学零起点全攻略(转)

3D计算机图形学零起点全攻略 这篇文章不包含任何技术知识,但我的希望它能指明一条从零开始通往3D领域的成功之路.我将罗列我看过的相关经典书籍作为学习文献,阅读规则是每进入下个内容,我都会假设已经完成前面全部的文献研习内容.相信若能按照这条路走到最后,会有所进益. 完成整部分内容需要具备基础: 英语:CET4以上 数学:精通数字加减乘除法. 物理:基本力学. 计算机:了解电脑的基本知识,熟练使用Windows. 电脑配置: CPU:双核1.5以上 显卡:NVIDIA GeForce8400G MS