Web应用开发之CSS(1)

  • A+
所属分类:Web前端
摘要

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


一、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; } 

属性选择器

  1. [属性名]
  2. [属性名="属性值"]
  3. [属性名*="部分属性值"]
  4. [属性名^="以XX开头的属性值"]
  5. [属性名$="以XX结尾的属性值"]

Web应用开发之CSS(1)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)

一般兄弟选择器

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)

    ​ 可以设置透明度

    Web应用开发之CSS(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、%

文本效果

文本阴影

text-shadow:x-offset y-offset shadow-size color;

x-offset的值为正,向右投影,为负,向左投影;y-offset的值为正,向下投影,为负,向上投影

相当投影在一个向右为正x轴,向下为正y轴的平面中

shadow-size可以说是投影的模糊程度吧,值越大越模糊,如下:

Web应用开发之CSS(1)

Web应用开发之CSS(1)

Web应用开发之CSS(1)

Web应用开发之CSS(1)

文本轮廓

outline:颜色,线型,宽度

列表样式

项目符号的形状

list-style-type:

  1. disc 实心圆形
  2. circle 空心圆形
  3. square 方形

自定义项目符号

list-style-image:url()

list-style-image:url(daqiao.ico);

Web应用开发之CSS(1)

项目符号位置

list-style-position:

inside/outside

表格

  • 表格的线:border-width border-style border-color
  • 表格里面线之间的联系:border-collapse
  • 表格单元格的大小:height width
  • 表格文字的对齐:vertical-align text-align
  • 表格文字与线之间的距离:padding
  • 标注的位置:caption-side:top/bottom

表格边线合并成统一的单边框

border-collapse:collapse; (线合并)

Web应用开发之CSS(1)

表格内部距离

padding:

通用

盒子模型

——————to be continued

(该系列的文章主要为学校的上课内容的梳理,欢迎一切交流讨论QWQ)