CSS学习笔记

最新推荐文章于 2024-05-30 14:49:04 发布

whatswhat

最新推荐文章于 2024-05-30 14:49:04 发布

阅读量361

点赞数

本文链接：https://blog.csdn.net/whatswhats/article/details/9036923

版权

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>

字体

效果

列表

表格

框模型

定位

样式选择器

whatswhat

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记

CSSCSS介绍CSS=层叠样式表（Cascading Style Sheets）HTML表达结构，CSS表达样式样式和内容/结构是分离的三种方式加入：做一个外部的css文件，然后把它链接到html中在中加入一个标记在单个html标记中加入 style 属性基本的样式包含：1.规定什么东西的样式例如style="background-color
复制链接

扫一扫