CSS学习笔记

来源：互联网发布：长歌门成男捏脸数据编辑：程序博客网时间：2024/05/22 06:27

CSS

CSS介绍

CSS=层叠样式表（Cascading Style Sheets）

HTML表达结构，CSS表达样式

样式和内容/结构是分离的

三种方式加入：

做一个外部的css文件，然后把它链接到html中
在 <head></head> 中加入一个 <style></style> 标记
在单个html标记中加入 style 属性

基本的样式包含：1.规定什么东西的样式例如<p style="background-color:yellow;"></p>表示规定背景的样式

背景样式

颜色：1.英文 2.RGB：#RRGGBB（两位的红两位的绿两位的蓝）

<!DOCTYPE html><html><head><meta charset=utf-8></head><!-- background-color: 背景颜色  用英文指明颜色,transparent:透明 --><!-- GRB:#FFFF00 #号后写十六进制的数字--><!-- GRB:rgb(0,255,0) 口号里写十进制的数字 --><!-- GRB:rgba(255,0,0,0.5) a表示阿尔法通道，即透明度,此处透明度为0.5 --><!-- style="background-image:url(mama.jpg);background-repeat:no-repeat;background-position:top right;background-attachment:fixed;background-image:url(mama.jpg);背景图片 --><!-- background-repeat是否重复:repeat(默认重复)、no-repeat、repeat-x、repeat-y(在X方向或Y方向上重复) --><!-- background-position位置:center、top、bottom、right、left、top right(右上)、100px 100px(以像素来指定) --><!-- background-attachment背景图片是否跟随文字滚动:scrool(默认滚动)、fixed --><body style="background:url(mama.jpg) no-repeat top fixed"><p style="background-color:rgba(255,0,0,0.5);">另一个段落<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p><p>我的第一个HTML页面<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p></body></html>

段落

<!DOCTYPE html><html><head><meta charset=utf-8></head><body><p style="color:red"><!-- 字体颜色 -->第一段第一段第一段第一段</p><!-- text-indent缩进:其后需跟长度单位。em(em较常用)当前字体的宽度；%百分比如text-indent:10%；in英寸；cm；mm；pt磅(印刷上的单位，=1/72英寸) --><!-- padding悬挂缩进:2em --><!-- line-height行间距:normal,数值如2 --><!-- text-align每行对齐方式:left默认,right,center,justify两端对齐 --><!-- word-spacing:10px --><!-- letter-spacing字间距:10px --><!-- text-transform:uppercase把所有英文字母小写变成大写,lowercase,capitalize首字母大写 --><!-- text-decoration装饰:underline,overline,line-through,blink闪烁(但不是所有浏览器都能看到) --><!-- white-space:normal,pre预设,pre-wrap有空格回车且自动卷入,pre-nowrap,pre-line合并空白保留换行 --><!-- direction文字方向:ltr(left to right 默认),rtl --><p style="text-indent:2em;direction:rtl">abcdefg第二段第二段第二段 daf ddfs df dfaf 第二段 第二段第二段第二段第  二段第二段第二段第二    段第二段第二段第二段第二段第二段第二段第       二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二       段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第       二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二       段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段。</p></body></html>

字体

效果

列表

表格

框模型

定位

样式选择器