美文网首页我爱编程
web开发学习日志3-CSS

web开发学习日志3-CSS

作者: 奋斗的岑爸 | 来源:发表于2018-02-07 14:33 被阅读0次

CSS简述

CSS (Cascading Style Sheets),即层叠样式表,是一种标记语言(markup language)。用来描述网站上各种元素的外观,例如颜色、字体、间距、排版等等。它把内容和样式分开了,内容部分用HTML来写,样式部分用CSS来写。

CSS语句的基本结构

选择器(selector)+声明块(declaration block)


CSS语句基本结构(www.udacity.com)
  • 选择器告诉浏览器我们要为哪些HTML元素设计样式
  • 声明块告诉浏览器需要将哪些样式应用于该HTML

CSS选择器

选择器种类很多,主要包含如下四大类

  • 基本选择器
  • 组合选择器
  • 伪类
  • 伪元素

对于初学者,首先接触到的是基本选择器里的两种:

ID选择器

一个HTML元素只能拥有一个ID,并且这个ID只能在网页中使用一次。

HTML代码:

<div id="identified">Here's a span with some text.</div>
<div>Here's another.</div>

CSS代码:

#identified {
background-color: DodgerBlue;
}

类(class)选择器

如果要给多个HTML元素添加相同的属性,那就要用到类(class)。有点绕口的说法,类可以用在多个HTML元素,一个HTML元素也可以有多个类。因此类异常强大与灵活。

HTLM代码:

<div class="classy text">Here's a span with some text.</div>
<div>Here's another.</div>

CSS代码:

.classy {
background-color: DodgerBlue;
}
.text {
font-size: 16px;
}

两种选择器的表达方式

如果HTML元素应用了ID属性,先写#,后面紧跟相应ID的名字

#description {
color: blue;
}

如果应用了class属性,先写 . (圆点),后面紧跟相应class的名字

.paragraphs {
color: red;
}

CSS样式表

如果我们要在多个网页上使用同一个 CSS 该怎么办?可以将所有 CSS 从一个文件复制到另一个文件, 但工作量明显加大,如果后期需要修改CSS代码,同时要更改这个 CSS 的每一个副本。毫无疑问工作量成倍增加,而且容易出错。那么有没有简单的方法呢?答案是肯定的,我们可以把CSS代码写到名为样式表的文件中, 然后在 HTML 中加一行代码链接到该文件。

样式表是一个文件,它包含描述元素如何在网页上呈现的代码。这和你之前的操作没有区别,除了 CSS 存在于不同文件中而你不必再使用 <style>标签。要创建样式表,只需将新文件添加到项目, 写入某些 CSS,然后将其另存为 name-of-stylesheet.css。

如何链接一个样式表

在你的网页能够使用样式表之前,你需要先链接它。执行此操作,需要在 HTML 中创建一个指向样式表的 <link>。创建链接只需在 HTML 的 <head> 中键入以下内容。

<link href="path-to-stylesheet/stylesheet.css" rel="stylesheet">

href 属性指定所链接资源的路径,rel 属性指定资源和文档之间的 关系。这里的关系是样式表。完成之后如下所示:

<head>
<title>我的网页</title>
...
<link href="path-to-stylesheet/stylesheet.css" rel="stylesheet">
...
</head>

CSS参考

目前已知的CSS属性已经有上百个,而且数量还在不断增多,如此庞大的数量我们是无法全部记住的,在以下网站中搜索关键词,可以找到所需要使用的 CSS 属性:

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference

相关文章

  • web开发学习日志3-CSS

    CSS简述 CSS (Cascading Style Sheets),即层叠样式表,是一种标记语言(markup ...

  • web开发学习日志1

    之前在一个学习编程的网站花费一万多元,没多久就坚持不下去了,感觉自己虎头蛇尾(确切的说是虎头无尾)的性格一时间也无...

  • Java日志体系(commons-logging)

    Java日志系统学习 作为一名Java开发者,日志是我们工作中经常接触到的一项技术。对于Web应用而言,日志的重要...

  • java日志简介

    前言 最近学习开java web服务器开发,开始学习java,处理业务逻辑,但对其中的日志比较好奇,之前没怎么接触...

  • web开发学习日志7-数组

    之前学习过数字、字符串、布尔值等数据类型,它们都是单一的数据结构。如果将大量的数据存储在一个地方或者一个变量中,无...

  • web开发学习日志6-函数

    到了相对复杂的一章,函数。 什么是函数 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。---http...

  • web开发学习日志4-if...else

    学到了Javascript条件语句部分,对大部分人来说是块硬骨头,我上学的时候在计算机课有接触,当时似懂非懂的蒙混...

  • web开发学习日志5-循环

    概念 循环:程序中用于重复执行特定操作的一段代码。任何循环都具有以下三个主要部分: 何时开始:设置循环的代码(例如...

  • 阿里大牛谈:前端必备知识点!

    web开发是什么??web前端开发薪资有多少?工资高吗?web开发学习路线是什么?Web前端开发工程师是一个很新的...

  • web开发学习路线图

    各类程序员学习路线图 web前端开发学习路径图 2016/2017 Web 开发者路线图 怎么学习前端开发?求推荐...

网友评论

    本文标题:web开发学习日志3-CSS

    本文链接:https://www.haomeiwen.com/subject/zjqozxtx.html