css的学习需要html基础,css全名翻译过来叫做:级联样式表,是一种用来表现html等样式的语言(即css为html提供显示效果)。
一,css的引入:
只有在html中引入css才能够起作用。
css的引入有三种方法:
1,内联属性:使用方法是,对于想要设置样式的html元素,直接修改它的style属性,将css代码直接写在style属性里, 例如:
<h1 style = "font-size: 12px;">设置字的大小</h1>
2,写在style标签里:
代码如下:
<head> <style> h1{ font-size: 12px; } </style> </head> //一般都写在head标签里面,不写在head标签里面会报错
3,用link标签引用外部文件:
代码如下:
<link rel="stylesheet" href="styles.css">
一般也写在head标签里。这是最常用的引入方法。
二,css基础语法:
css的语法规则由两个主要部分构成:css选择器,一级一条或多条声明。
1,元素选择器:元素选择器是以html标签作为目标的选择器,这种选择器的目的是改变元素的默认样式。如:
<h1>{ font-size: 12px; }
如果写了上面的css,那么所有的h1标签的大小都会变成12px。
2.类选择器:
类选择器是一种独立于html元素来指定样式的选择器,例如:
.waring{ color: red; }
通过class属性,将这个类与html元素关联在一起。
<h1 class ="warning">标题</h1> <p> 内容</p>
这样h1和p元素的样式就可以设置color属性为red啦
类选择器还可以与其他选择器搭配使用,比如还可以是上面的html代码。但是css也可以写成:
h1.warning{ color: red; }
这样就只有h1元素样式的color属性被设置成red了,p元素没有变。
当我们期望的类选择器是适用于所有元素的时候,可加前缀*号,也可不加。
注意:css里大小写是敏感的;类选择器不支持空格。
3,id选择器:
id选择器前面有一个#号,形如:
*#waring{ font-weight: bold; }
跟类选择器一样,一般不写*
#waring-title{ font-weight: bold; }
这个id对应着html标签的id属性
<h1 id = "waring-title">警告标题</h1>
这样h1元素的font-weight属性就被设置成bold。
**注意:
1, id选择器大小写敏感,不支持空格。
2,虽然id选择器也可以与其他选择器配合使用,但是id是用来标记html元素的唯一记号,所以不要这样使用,同时请不要在一个页面上使用超过一个同名id。
相关推荐
上百个CSS实例|CSS基础学习|CSS入门基础|CSS样式集合
CSS核心基础--CSS基础选择器 CSS选择器 什么是CSS选择器? CSS基础选择器 01 CSS基础选择器 要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器。 CSS...
DIV+CSS教程——第一天XHTML_CSS基础知识
书名:CSS基础教程 作者:(英)柯林森 著,刘志忠 等译 来源:人民邮电出版社 出版时间:2007年09月 ISBN:9787115164629 定价:49元 内容介绍: 本书是优秀的CSS 入门书,重点讲述了如何使用CSS 实现基于Web ...
css基础教程,适合新手使用,仅供参考
CSS基础-介绍及语法,css入门必备资料
Html+css基础
css基础知识简介,刚学习css布局的童鞋可以下载看看
html + css 基础学习html + css 基础学习html + css 基础学习 html + css 基础学习html + css 基础学习html + css 基础学习 html + css 基础学习html + css 基础学习html + css 基础学习 html + css 基础学习...
css基础教程 适合初学者的教程,好就给个评价,呵呵,
CSS基础知识-1.pdf
HTML+CSS基础知识点.pdf
学习CSS基础知识时自己做的笔记,希望帮到有缘人
CSS基础知识.pdf
50道CSS基础面试题(附答案) 1 介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的? 2 box-sizing属性? 3 CSS选择器有哪些?哪些属性可以继承?
DIV+CSS基础教程全攻略,让你熟练如何更好的掌握DIV+CSS
css 基础 代码 CSS之入门篇——推荐新手
HTML与CSS基础教程知识点总结,方便知识点的记忆和查询,用ue编辑的
结合博客前端CSS基础——常规流中练习对应图片代码,三大布局规则之一常规流布局,用常规流布局实现网页效果图。
作者是:Elizabeth Castro写的《HTML XHTML CSS 基础教程(第 6 版)》,特别适合初学者。非常经典的一部H5教程