CSS学习笔记一

最新推荐文章于 2024-07-21 19:13:42 发布

阿茶阿茶

最新推荐文章于 2024-07-21 19:13:42 发布

阅读量143

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/Flora_hsx/article/details/124541108

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一：知识点

1：CSS 指层叠样式表 (Cascading Style Sheets)。

2：CSS样式定义如何显示HTML元素，样式通常存储在样式表中。

样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。

3：CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

a：选择器通常是您需要改变样式的 HTML 元素。

b：每条声明由一个属性和一个值组成。

c：属性（property）是希望设置的样式属性（style attribute）。

d：每个属性有一个值。属性和值被冒号分开。

e：CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来

4：CSS注释：/* */

5：id选择器以#来定义，ID属性最好不要以数字开头；其可以为标有特定 id 的 HTML 元素指定特定的样式。

#para1
{
    text-align:center;
    color:red;
}

6：class 选择器用于描述一组元素的样式，class 选择器和id选择器的区别是，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示

.center {text-align:center;}

也可以指定特定的HTML元素使用class。

p.center {text-align:center;}

7：插入CSS样式表的方法：

a：外部样式表（样式应用于很多的页面时使用）

每个页面使用 <link> 标签链接到样式表， <link> 标签在（文档的）头部，样式表应该以 .css 扩展名进行保存

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

b：内部样式表（单个文档需要特殊样式时使用）

可以使用style标签在文档头部定义内部样式表

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

c：内联样式（当样式仅需要在一个元素上应用一次）

将样式和内容混在一起，慎用！

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

注：如果某些属性在内部样式表和外部样式表中被通用的选择器定义，那么颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

8：（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

9：CSS背景属性用于定义HTML元素的背景

a：background-color：定义背景颜色

1：body {background-color:#b0c4de;}
2：body {background-color:rgb(0,0,255);}
3：body {background-color:red;}

颜色定义方式：十六进制，rgb(数值)，颜色名称。

b：background-image：背景图像，默认情况是平铺重复显示。

c：background-repeat：设置背景图像只在水平方向平铺或者垂直方向

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

设置背景图像定位与不平铺

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

d：background-position：改变图像在背景中的位置

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

e：background属性的简写

body {background:#ffffff url('img_tree.png') no-repeat right top;}

简写时属性值顺序为：background-color，background-image，background-repeat，background-attachment，background-position。

f：background-attachment：背景图像是否固定或者随着页面的其余部分滚动

background-attachment:fixed;

10：文本的颜色值设置与背景颜色值设置一致

11：文本的对齐方式：居中，左对齐，右对齐，两端对齐。

参考资料：

1：link标签的rel属性：HTML link元素的rel属性_林夏天的博客-CSDN博客

阿茶阿茶

关注

0
点赞
踩
0

收藏

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

一
复制链接

扫一扫

专栏目录

CSS学习笔记一

“相关推荐”对你有帮助么？