阅读模式:

Web应用开发之CSS(1)

阅读量:12  一键切换:繁體   HtmlCss  发布时间:来源:知识库  
内容摘要:一、CSS基本用法(CSS: Cascading Style sheet)样式引用行内样式CSS写在html文件中的body里面例如:<body> <p style="color:r......

Web应用开发之CSS(1)

一、CSS基本用法

(CSS: Cascading Style sheet)

样式引用

行内样式

CSS写在html文件中的body里面

例如:

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

内嵌式

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>

链接式

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

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

然后将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>

看看效果

导入式

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

CSS选择器

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

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

基础选择器

元素选择器

直接是标签名

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结尾的属性值"]

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

复合选择器

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

交集选择器(又称标签指定式选择器)

(即……又……)

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

并集选择器

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

后代选择器

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

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

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

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

后代选择器

儿子选择器

相邻兄弟选择器

一般兄弟选择器

二、基本样式

背景

颜色

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、%

文本效果

文本阴影

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

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

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

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

文本轮廓

outline:颜色,线型,宽度

列表样式

项目符号的形状

list-style-type:

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

自定义项目符号

list-style-image:url()

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

项目符号位置

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; (线合并)

表格内部距离

padding:

通用

盒子模型

——————to be continued

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

分享到:
首页桂ICP备2022000863号分类地图学习工具教育专题当前时间:本站内容只用于学习和交流,如有牵扯版权问题请联系站长邮箱: