发表评论
324 次浏览

A+

所属分类：Web前端

摘要

(CSS: Cascading Style sheet)CSS写在html文件中的body里面例如：CSS写在HTML文件中的<head>里面

便宜好用的国外VPS推荐

一、CSS基本用法

(CSS: Cascading Style sheet)

样式引用

行内样式

CSS写在html文件中的body里面

例如：

<body>     <p style="color:red;">五星红旗的底色是红色的，上面的五个<sapan style="color:yellow;">星星</sapan>是黄色的     </p> </body>

Web应用开发之CSS(1)

内嵌式

CSS写在HTML文件中的<head>里面

例如：

<head>     <style type="text/css">         h1{             color:lawngreen;             font-size:5em;             font-weight:700;             font-style:oblique;                  }         p{             color:aqua;             font-size:2em;             font-size:300;         }     </style> </head> <body>     <h1>内嵌式css的演示</h1>     <p>内嵌式css的作用只是局限于嵌入了样式表的单一HTML</p> </body>

Web应用开发之CSS(1)

链接式

（先加载CSS，再渲染页面）推荐的方式，将CSS语言分离出来，和HTML文本语言分装在两个文件里，语言不混淆，更易于查看和编辑。

建立一个和.html文件在同一目录的文件夹，并将.css文件放在该文件夹中。

Web应用开发之CSS(1)

然后将CSS操作放在.css文件中，例如：

h1{ 	color:darkred; 	text-align:center; 	font-weight:900; 	 } p{ 	color:chartreuse; 	font-size:1.2em; }

.css文件里只用写如上这些，直观的把操作写出来，不需要写<style>标签啥的并放在里面

然后再.html文件中的<head>标签里使用<link>标签，起到链接的作用，一个.css文件中的样式可以链接应用到多个不同的html文件中去。rel是relation（关系）；href是路径，可用url，可用相对路径和绝对路径。

<link rel="stylesheet" href="css/demonstration.css" type="text/css">

<body>文件里写好内容

<body> 	<h1>接式的演示实例</h1>     <p>         链接式样式表功能比较强大，样式表示以独立的文件形式存在，样式表中涉及的样式可以应用到多个HTML文件     </p> </body>

看看效果

Web应用开发之CSS(1)

导入式

(先加载页面，再渲染)具体实行起来怎么样不知道，自己常用的是链接式，就放个例子：

Web应用开发之CSS(1)

CSS选择器

选择器概念：选择html文档中的一个或多个元素，在其上应用指定的样式

Web应用开发之CSS(1)

选择器：表明要应用规则的元素
声明：表明要如何显示选择器的元素

基础选择器

元素选择器

直接是标签名

h1{ 	color:darkred; 	text-align:center; 	font-weight:900; } p{ 	color:chartreuse; 	font-size:1.2em; }

ID选择器

"#"+"id值"

#title{ 	text-align:center; 	font-weight:800; } #red1{ 	font-size:lem; 	colo:red; } //在id名前面加上 "#" 以起到选择作用  //body部分 <body>     <h1 id="title">夜雨</h1>  //被选择了     <h3>唐代：白居易</h3>     <p id="red1">我有所念人，隔在远远乡</p>  //被选择了      <p id="yellow1">我有所感事，结在深深肠</p> </body>

类选择器

"."+"类值"

.red{  color:red; } .yellow{  color:yellow; }

通配符选择器

"*" 表示，它是所有选择器中作用范围最广的，能匹配页面中所有元素。基本语法格式如下

*{属性1：属性值1；属性2：属性值2；属性3：属性值3}

例如下面代码，用通配符选择器定义CSS样式，设置所有html标记字体的大小

*{ 	font-size:18px; }

属性选择器

[属性名]
[属性名="属性值"]
[属性名*="部分属性值"]
[属性名^="以XX开头的属性值"]
[属性名$="以XX结尾的属性值"]

Web应用开发之CSS(1)

例子中的选择是，只要有属性为href的元素，样式均为粉色，而有属性href并且该属性是以"http://www.scu.edu.cn"开头的元素，则样式设置为绿色

复合选择器

由两个或多个基础选择器，通过不同方式组合而成，具体如下

交集选择器（又称标签指定式选择器）

（即……又……）

标签写前面，类值或id值紧跟后面即可，加.或#

Web应用开发之CSS(1)

并集选择器

“,” 用逗号将各个选择器连接而成，任何形式选择器（包括标记选择器、class类选择器、id选择器），都可以作为并集选择器的一部分

Web应用开发之CSS(1)

后代选择器

标签1 标签2 选择所有后代

标签1>标签2 选择儿子元素（直系下一级）

标签1+标签2 选择同级，相邻的元素

标签1~标签2 选择同级，无论相邻与否的元素

儿子选择器

Web应用开发之CSS(1)

相邻兄弟选择器

Web应用开发之CSS(1)

一般兄弟选择器

Web应用开发之CSS(1)

二、基本样式

背景

颜色

body{ 	background-color:red; }

颜色可以有种方式输入

根据颜色名字：red、yellow……
根据颜色16进制：#rrggbb

00-FF （0-256）
颜色十进制组合：rgb（xx,xx,xx）

红蓝绿三原色配色，xx可以填0~255/百分比（饱和度）
带aplpha通道的颜色设置：rgba（xx,xx,xx,0-1）

可以设置透明度

好像加不加color都可以，而且rgb好像也可以设置透明度，就在三个原色之后加逗号再加0-1（透明程度），不知道怎么回事

图片

body{ 	background-image:url();//可以填http，也可以填本地图片 }

平铺

background-repeat: norepeat/repeat/repeat-x/repeat-y;

位置

background-position: bottom/top/center/left/right/the combined attribute;

是否滚动

background-attachment: scroll/fixed;

字体

文字段落设置

文字颜色：color
文字的缩进：text-indent

文字缩进的大小使用单位是长度单位：inch、cm、mm、em、%pt、rem

rem是以浏览器默认16元素为单位做改动，5rem就是80像素大小

em相当与父元素，rem相当与根元素，均是相对大小
文字行高：line-height
文字对齐：text-align
文字词与词的空白：word-spacing
文字字母之间空白：letter-spacing
文字大小写：text-transform

uppercase：单词大写
文字修饰：text-decoration

underline，overline，line-through：划线，可以同时使用，用空格间隔开
文字中的空格处理：whitespace

文本空格处理五种方式

normal：n个空格、回车显示出来都是1个空格

pre：网页显示的与敲代码时的输入相同

pre-wrap：限定每行显示宽度，超过宽度自动换行

no-wrap：不自动换行

pre-line：n个空格显示为1个空格，回车会保留显示出来
文字书写方向：direction

字体设置

字体家族系列：font-family

1、通用字体：serif、sans-serif、monospace、cursive（一种手写体）、fantasy（一种艺术字）

2、专用字体：simsun

3、系列字体：宋体黑体楷体
字体是否倾斜：font-style
字体的变体：font-variant

normal、small-caps（小型大写字母)
字体加粗：font-weight

bold、bolder、normal、100-900
字体大小：font-size

px、em、%