CSS Lesson1

CSS 层叠样式表

HTML表达结构（内容），CSS表达样式。

CSS文件中插入注释/* das ist a comment */ 到现在为止我一直在写html，并没有写过CSS文件。

HTML文件中插入注释

1、背景样式

背景颜色 <body style='background-color:grey'> 注意冒号而非等号背景颜色默认transparent（透明）

rgb颜色表示 red green blue 1、<body style='background-color:#FF00FF'> #FF00FF表示纯红混纯蓝

　　　　　　　　　　　　　 2、<body style='background-color:rgb(255,255,0)'> rgb(255,255,0)表示纯红纯绿混合

　　　　　　　　　　　　　 3、<body style='background-color:rgba(255,255,0,0.5)'> a 透明度 0到1之间的一个浮点数 a＝1和原本透明度一致

背景图片 <body style='background-image:url(titelpfluegen.jpg)'> 图片和html文件同文件夹，url里直接写图片名若图片在不同文件夹下，需指明路径。

背景位置 <p style='background-position:right'> 有 center left right top bottom等，右上角top right或者right top都可；也可直接给出坐标background-position:100px 100px（横纵坐标间空格即可）。

背景重复<p style='background-repeat:no-repeat'> 重复方式有 no-repeat表示无重复，只显示一张图片；repeat-x表示只在x方向上重复；repeat-y表示只在y轴方向上重复（图片填满整个y方向）；repeat表示图片重复并填满整个背景。

背景是否跟着文字滚动 <p style='background-attachment:scroll'> scroll表示背景跟着文字滚动，fixed表示背景固定。

<!DOCTYPE html>
<html>
<head>
    <title>背景样式</title>        <!--标签页的名字-->
    <meta charset=utf-8>
</head>
<body>
<p style='background-color:rgba(0,255,0,0.2)'>     背景颜色有三种写法
<br>
</p>
<p style='background-image:url(titelpfluegen.jpg);  背景图片引用方法
background-repeat:no-repeat;　　　　　　　　　　　　　　无重复那就只有一张图片
background-position:right;　　　　　　　　　　　　　　　　图片放在右边
background-attachment:scroll'>　　　　　　　　　　　　　　背景跟着文字滚
<br>
<br>
<br>
<br>
<br>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　图片看不出来那就一直br
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>   <!-- 注释注释-->
<br>
<br>
</p>
<p style='background:#0000FF url(neu22.jpg) repeat-y fixed top'>   懒人写法 顺序 颜色 图片位置 重复 背景是否滚动 位置
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</p>
</body>
</html>

2、段落

背景颜色 background-color 字体颜色 color

首行缩进 text-indent

行距 line-height

对齐方式 text-align justify两端对齐

单词间距（针对英文） word-spacing

字符间距（汉字字母都是一个字符） letter-spacing

字符转换 text-transform:uppercase/lowercase/capitalize （全大写／全小写／首字母大写）

上下划线 text-decoration underline/overline/line-through

空格 white-space normal（所有空格当一个）

pre有空格就显示但不卷绕（卷绕指拉动页面边界段落会自适应）

　　　　　　　 pre-wrap有空格也带卷绕

　　　　　　　　　nowrap无卷绕整段只有一行

　　　　　　　　　pre-line 合并空白保留换行

<!DOCTYPE=html>
<html>
<head>
    <title>我的页面</title>
    <meta charset=utf-8>
</head>
<body>
<h1>58 inn</h1>
<p style='color:red;line-height:2em'>位于沙溪古镇寺登街近古戏台处</p>  <!--line－heigth：normal表示正常间距-->
<p style='text-indent:2em'>上個月回家休了一個月的假,安排了一個短暫的花東之旅,住在花蓮的越牆工園,已經開了12年的民宿,還是讓我好喜歡,有著主人家的溫暖,我想分享給58號小院的好朋友們.以後,凡是預定來入住的朋友,都能收到我親自為你們準備的小點心,就是讓你們開心啦!</p>
<p style='line-height:1em;
text-align:justify;
word-spacing:10px;
letter-spacing:1px;
text-transform:uppercase;
text-decoration:underline overline line-through;
white-space:pre-wrap'>Jimmi and Xiaoniu同时叹了一口气，接着都吃了一把狗粮。它在和小老鼠干完仗之后显然已经筋疲力尽了。还是没有两行，Jimmi叹了一口气，接着吃了一把狗粮。它在和小老鼠干完仗之后显然已经筋疲力尽了。</p>
</body>
</html>

3、字体

<!DOCTYPE=html>
<html>
<head>
    <title>我的页面</title>
    <meta charset=utf-8>
</head>
<body>
<h1>58 inn</h1>
<p style='color:red;line-height:2em'>位于沙溪古镇寺登街近古戏台处</p>  <!--line－heigth：normal表示正常间距-->
<p style='text-indent:2em'>上個月回家休了一個月的假,安排了一個短暫的花東之旅,住在花蓮的越牆工園,已經開了12年的民宿,還是讓我好喜歡,有著主人家的溫暖,我想分享給58號小院的好朋友們.以後,凡是預定來入住的朋友,都能收到我親自為你們準備的小點心,就是讓你們開心啦!</p>
<p style='font-family:cursive;
font-style=:italic'>Jimmi and Xiaoniu同时叹了一口气，接着都吃了一把狗粮。它在和小老鼠干完仗之后显然已经筋疲力尽了。还是没有两行，Jimmi叹了一口气，接着吃了一把狗粮。它在和小老鼠干完仗之后显然已经筋疲力尽了。</p>
</body>
</html>

posted @ 2017-10-13 17:49 sniperlr 阅读(104) 评论(0) 收藏举报

刷新页面返回顶部