CSS学习笔记(Day3)

最新推荐文章于 2024-09-14 17:59:56 发布

DesmondCobb

最新推荐文章于 2024-09-14 17:59:56 发布

阅读量497

点赞数

分类专栏： CSS学习笔记文章标签： css 学习笔记

本文链接：https://blog.csdn.net/DesmondCobb/article/details/74941347

版权

CSS学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、如何创建CSS

1.外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择在使用外部样式表的情况下可以通过改变一个文件来改变整个站点的外观

每个页面使用标签链接到样式表标签在文档的头部(head)

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

外部样式表可以在任何文本编辑器中进行编辑，文件不能包含任何的 html 标签，样式表应该以 .css 扩展名进行保存
注意:样式表的属性值和单位之间不允许有空格

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

2.内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表
你可以使用style标签在文档头部定义内部样式表

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

3.内联样式

要使用内联样式，需要在相关的标签内使用样式(style)属性

4..多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来

二、背景

1.background-color属性设置背景色

p {background-color: gray; padding: 20px;}

padding属性声明背景色将在文本外进行外延，background-color属性不能继承

2.background-image属性设置背景图片

body {background-image: url(/i/eg_bg_04.gif);}

3.background-repeat属性设置背景重复

属性值repeat将在x和y方向上都进行重复
属性值repeat-x或者repeat-y则只在x或者y方向上进行重复

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

4.background-position属性对背景进行定位

为background-position提供属性值有多种方法

a.使用关键字

根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向
如果只出现一个关键字，则认为另一个关键字是 center

b.使用百分数

百分数同时作用于元素与图像，例如

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:aa% bb%;
  }

将会把图像的aa%,bb%与元素的aa%,bb%处对齐

如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%

c.使用长度值

长度值解释的是元素内边距区左上角的偏移，偏移点是图像的左上角

background-position:50px 100px;

5.background-attachment设置背景关联

background-attachment默认属性是scoll，背景会随着网页滚动而滚动将其设置为fixed会防止这种滚动

三、 CSS文本

1.缩进文本

CSS提供了text-indent属性进行文本缩进
例如常用的首行缩进

p {text-indent: 5em;}

如果使用负值可以进行悬挂缩进，不过可能造成文本超出网页显示范围之外，所以可以设置一个外边距或者内边距

p {text-indent: -5em; padding-left: 5em;}

text-indent也可以使用百分数值作为属性值，缩进为父元素的百分长度
注意:text-indent属性可以继承

2.水平对齐

使用text-align属性设置文本水平对齐
text-align默认属性值为left
某些文字可能从右往左书写，可以使用right属性值
middle将居中对齐
text-align: justify进行两端对齐，宽度为父元素的内边框

3.字间距与字母间距

通过word-spacing和letter-spacing属性更改字间距和字母间距
两者的默认值均为0

p.spread {word-spacing: 30px;}
p.spread {word-spacing: 30px;}

4.字符转换

text-transform 属性处理文本的大小写

属性值	说明
none	默认值不进行改动
uppercase	全部大写
lowercase	全部小写
capitalize	仅单词首字母大写

5.文本装饰

text-decoration属性提供五个值

属性值	说明
none	关闭元素上所有装饰
underline	下划线
overline	上划线
line-through	贯穿线(删除线)
blink	文本闪烁

可以在一个规则中结合多种装饰

a:link a:visited {text-decoration: underline overline;}

text-decoration 值会替换而不是累积起来，所以如果两个不同的装饰都与同一元素匹配，胜出规则的值会完全取代另一个值

6.处理空格

white-space属性确定对源文件中空格及换行的处理，总结如下

属性值	空格	换行	自动换行
pre-line	合并	保留	允许
normal	合并	忽略	允许
nowrap	合并	忽略	不允许
pre	保留	保留	不允许
pre-wrap	保留	保留	允许

7.文本方向

direction 属性有两个值:ltr 和 rtl
大多数情况下，默认值是 ltr，显示从左到右的文本
如果显示从右到左的文本，应使用值 rtl