首页 > 开发 > CSS > 正文

css简介_动力节点Java学院整理

2024-07-11 08:25:28
字体:
来源:转载
供稿:网友

CSS(Cascade Style Sheet),即层级样式表。

HTML可以说只是给网页填充了内容,CSS则是对网页进行化妆、修饰,比如给文字设置字体、颜色、大小等。

以前在HTML标签中能够通过设置属性的方式(比如<div width="80px">)为标签定义样式(类似CSS的功能),但是现在推荐使用CSS设置(div{width:80px;}),即"HTML与CSS分离",在web中还有“页面展示与逻辑处理分离”等概念。

一般来说目前实现网页时不需要从零做起,网上有很多好的CSS代码可以使用但是为了能看懂那些代码(或更好地学习CSS框架),我们需要学习CSS的基本知识。

CSS的基本结构如下:

<selector>{  <attr1>:<value1>;  <attr2>:<value2>;  <attr3>:<value3>;  ......  <attrN>:<valueN>;}

解释:

<selector>的中文名叫“选择器”,表示对哪个元素设置样式。<selector>大括号内部设置具体的样式,如字体等。

设置样式的方法是通过多对<attr>:<value>组合而成,中间用分号( ; )分隔。

这里举个简单的例子:

body{ //对<body>内的元素进行设置  font-size:12px; //设置字体大小为12px,px是pixel的缩写,表示像素  font-family:sans-serif,Georgia; //设置首选字体为sans-serif,如果本机内没安装此字体,则使用Georgia}

CSS的规则

1.继承原则:如果父标签定义了某样式,则默认对应的子标签也应用该样式。

2.就近原则:离修饰标签越近的CSS样式优先级越高。
 

引入CSS样式的方法

这里只介绍两种最常用的:

1.内部样式表:在<head></head>内部添加:<style type="text/css">......</style>

2.外部样式表:将CSS放在文件(如home.css)中,并在<head></head>内部添加:<link rel="stylesheet" type="text/css" href="home.css"/>

在CSS中不可避免会遇到颜色设置,因此这里我们需要学习怎么表示颜色。

共有4种颜色表示法:

1.预定义颜色:例如“color:black”中的black就是预定义的颜色。

2.十六进制表示法:#ABCDEF,其中AB、CD、EF分别对应R、G、B。例子:#FFFFFF 表示白色。

3.短十六进制表示法:这是对第二种表示法的特例,当A=B时A和B只写一个(同样地,C=D、E=F 时也类似)。例子:#FF00CC 可简写为 #F0C.

4.rgb表示法:rgb(255,255,255) 表示白色。  

CSS Reset

起因:在不同浏览器中的默认CSS样式可能是不同的,比如按钮,在IE中可能是样式A,在Chrome中是样式B,在Firefox中是样式C,这种不一致性会让开发者不爽。因此就需要CSS Reset来统一不同浏览器的默认样式。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表