如果把网页比作一个人的话,html就是他的骨架,而css是他的皮肤,javascript是神经控制着行动。html,css,javascript都是构建网页的核心技术。

CSS简介

css指的是层叠样式表(Cascading Style Sheet),样式就是定义如何显示html元素,设置它的背景、字体大小颜色、边框等等。通常把样式存储到样式表中,为了代码简洁便于维护,大多数放置在css文件中,引入外部css文件,css文件就是一个外部样式表。

css是如何工作的?

在《HTML元素属性及意义》那一节课程中,我们讲大多数标签都有的style属性,是规定元素的行内样式。现在我们开始设置下hello word 字体大小为40像素

<body style="font-size:40px">
hello world
</body>

刷新网页,我们发现网页内字明显大了。

css语法介绍

css语法规则集由选择器和声明块组成。选择器指的就是您要设置样式的html元素。如标签名(body ,h1,p,div...)就是一个选择器。

在《 HTML文档结构》中讲过head头部可以添加style样式表。所以上边body标签内的样式可以移出来放到head中,如:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
font-size:40px
}
</style>
</head>
<body>
hello world
</body>
</html>

css代码注释:用于对代码的注释或者解释代码,以 /* 开始,以 */ 结束。如:

p{
font-size:16px; /* 设置p标签内的文字大小为16像素 */
}

练习题:如果我们需要写两个各10条数据的列表,第一个列表字体是16px,第二个列字体大小是20px,我们该如何写代码呢?

CSS从入门到喜欢,从喜欢到着魔的更多相关文章

  1. CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性

    大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...

  2. CSS快速入门(四)

    目录 CSS快速入门(四) 浮动 float属性 clear属性 浮动解决的问题及其影响 解决父标签塌陷的方法 浮动案例 定位 什么是脱离文档流 定位的两种方法 position定位 static定位 ...

  3. CTF---密码学入门第二题 我喜欢培根

    我喜欢培根分值:20 来源: Ph0enix 难度:中 参与人数:3449人 Get Flag:1410人 答题人数:1653人 解题通过率:85% key: CTF{} 解题链接: http://c ...

  4. Html与CSS快速入门01-基础概念

    Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间.最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下.内容相对都比较简单,很类似工具手册的学习,但目标是熟练掌握. ...

  5. 1. web前端开发分享-css,js入门篇

    关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...

  6. Html与CSS快速入门02-HTML基础应用

    这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 示例 ...

  7. Html与CSS快速入门03-CSS基础应用

    这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 边框 ...

  8. Html与CSS快速入门04-进阶应用

    这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 之前 ...

  9. web前端开发分享-css,js入门篇(转)

    转自:http://www.cnblogs.com/jikey/p/3600308.html 关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人 ...

随机推荐

  1. TensorFlow之keras.layers.Conv2D( )

    keras.layers.Conv2D( ) 函数参数 def __init__(self, filters, kernel_size, strides=(1, 1), padding='valid' ...

  2. 摄像头ISP系统原理(下)

    摄像头ISP系统原理(下) l  WDR(Wide Dynamic Range)------宽动态 动态范围(Dynamic Range)是指摄像机支持的最大输出信号和最小输出信号的比值,或者说图像最 ...

  3. AJAX第二天笔记

    AJAX day1 jquery中的ajax 拦截请求: $.ajaxPrefilter()  jquery方法请求参数的本质: 无论我们填写的何种形式的参数,都会被jQuery转换成查询字符串形式传 ...

  4. JUC 并发编程--07 阻塞队列版本的 生产者消费者(不使用synchronized和 lock),也有一些疑惑,最终解惑

    直接上代码: 前提是你已经 熟悉了原子类,volatile,和阻塞队列 public class JucPCdemo03 { /** * 阻塞队列的应用: 这里实现的生产者消费者,生产一个消费一个 * ...

  5. 【NX二次开发】获取两个面之间的所有面

    已知两个蓝色面,使用遍历面的方法求紫色面.算法例子: 1 bool is_NeighborFace(tag_t tagFace1, tag_t tagFace2) 2 { 3 vector<ta ...

  6. 代码实测:给redis中的key取一个正确的名字多么重要

    redis对写入的key长度有限制吗? 太长的key对性能有影响吗? key越长对性能影响越大? 如何评估键长度对性能的影响? talk is cheap, show me the code! 今天我 ...

  7. 在线博客转PDF电子书 | JS爬虫初探

    最近在看一位大佬写的源码解析博客,平时上下班用手机看不太得劲,但是平板又没有网卡,所以就想搞个离线pdf版,方便通勤时间学习阅读. 所以,问题来了: 怎么把在线网页内容转成pdf? 这位大佬的博客是用 ...

  8. HTTP首部字段详解

    HTTP首部字段详解 在HTTP/1.1规范中定义了47种首部字段,总共分为四大类: 通用首部字段 -- 请求报文和响应报文两方都会使用的首部 请求首部字段 -- 从客户端向服务器端发送请求报文时使用 ...

  9. dev下拉框选择不同值显示不同控件

    单列的ASPxFormLayout直接前台控制就可以了,多列的前台控制后会出现空白 <dx:LayoutItem Caption="内容类型" Height="40 ...

  10. 单臂路由&链路捆绑

    单臂路由&链路捆绑 目录 一.单臂路由 1.1.单臂路由作用 1.2.单臂路由实现不同VLAN间通信的原理 二.单臂路由相关命令配置 三.链路捆绑 3.1.以太网链路聚合原理 3.2.命令配置 ...