CSS基础知识

最新推荐文章于 2024-09-27 15:11:44 发布

生锈铁锚

最新推荐文章于 2024-09-27 15:11:44 发布

阅读量290

点赞数

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

本文链接：https://blog.csdn.net/CoCossbn/article/details/52745601

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css基础语法

css规则有两个主要的部分组成：选择器，以及一条或者多条声明

 h1 { color:blue; font-sizeL12px; }

**css内部的注释以”/“开始，以”/”结束**

p {
   text-align:center;
   /* 这里是一个注释 */
   color:blick;
   font-family:arial;
  }

id选择器，通过”#”来选择HTML元素

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

class选择器，通过”.”来选择一组class元素

.center{ text-align:center; }

指定特定的HTML元素使用class

p.center { text-align:center; }

引入外部样式表

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

内部样式表

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

内连样式表

<p style="color:sienna; margin-left:20px;">This is a paragraph.</p>

当同一个HEML元素被不止一个样式定义，所有的样式层叠与一个样式表中，优先级由小到达为

1.浏览器缺省样式
2.外部样式表(.css文件)
3.内部样式表(位于标签内部)
4.内连样式(在HTML元素内部)

background-color 属性定义了元素的背景颜色

body { background-color:red; }

background-image 属性描述了元素的背景图像

body { background-image:url('paper.gif'); }

定义背景图只在水平方向平铺

body { background-image:url('paper.gif'); background-repeat:repeat-x; }

改变图像在背景中的位置

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

将这些属性合并在同一个属性中

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

生锈铁锚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录