CSS学习笔记（一）

最新推荐文章于 2024-07-18 23:49:29 发布

黄河村店小二

最新推荐文章于 2024-07-18 23:49:29 发布

阅读量71

点赞数

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

本文链接：https://blog.csdn.net/dsgwl520/article/details/120001199

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS学习笔记（一）

1. 参考网址

菜鸟教程

2. CSS的创建

2.1 插入样式表的三种方式

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)

/*外部样式表*/
<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">这是一个段落。</p>

2.2 多重样式优先级

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

2.3 几个注意点

不要在属性值与单位之间留有空格（如：“margin-left: 20 px” ），正确的写法是 “margin-left: 20px” 。
如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

2.4 CSS中颜色的定义

十六进制 - 如："#ff0000"
RGB - 如：“rgb(255,0,0)”
颜色名称 - 如：“red”

3. CSS background（背景）

3.1 CSS 属性定义背景效果

background-color
background-image
background-repeat
background-attachment
background-position

3.2 背景颜色

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

/*背景颜色*/
body {
    background-color:#999;
}

3.3 背景图像

background-image 属性描述了元素的背景图像.
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

/*背景图像*/
body {
    background-image:url('https://img0.baidu.com/it/u=1296489273,320485179&fm=26&fmt=auto&gp=0.jpg');
}

3.4 背景图像 - 水平或垂直平铺

/*水平平铺*/
body {
    background-image:url('https://img0.baidu.com/it/u=1296489273,320485179&fm=26&fmt=auto&gp=0.jpg');
    background-repeat:repeat-x;
}

/*垂直平铺*/
body {
    background-image:url('https://img0.baidu.com/it/u=1296489273,320485179&fm=26&fmt=auto&gp=0.jpg');
    background-repeat:repeat-y;
}

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

/*不平铺*/
body {
    background-image:url('https://img0.baidu.com/it/u=1296489273,320485179&fm=26&fmt=auto&gp=0.jpg');
    background-repeat:no-repeat;
}

/*设置定位*/
body
{
    background-image:url('https://img0.baidu.com/it/u=1296489273,320485179&fm=26&fmt=auto&gp=0.jpg');
    background-repeat:no-repeat;
    background-position:right top;
}

3.6 背景-简写属性

当使用简写属性时，属性值的顺序为：:

background-color
background-image
background-repeat
background-attachment
background-position

/*简写属性*/
body {
    background:#ffffff url('https://img0.baidu.com/it/u=1296489273,320485179&fm=26&fmt=auto&gp=0.jpg') no-repeat right top;
}

4. CSS Text（文本）

4.1 文本颜色

/*文本颜色*/
body {
    color:yellow;
}
h1 {
    color:#00ff00;
}
h2 {
    color:rgb(255,0,0);
}

4.2 文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.
当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

/*文本的对齐方式*/
h1 {text-align:right;}
p.date {text-align:left;}
p.main {text-align:justify;}

4.3 文本修饰

text-decoration 属性用来设置或删除文本的装饰

/*删除链接的下划线*/
a {text-decoration:none;}

/*上划线、删除线、下划线*/
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

4.4 文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

/*大写、小写、首字母大写*/
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

4.5 文本缩进

文本缩进属性是用来指定文本的第一行的缩进。

/*文本缩进*/
p {text-indent:100px;}

黄河村店小二

关注

0
点赞
踩
0

收藏

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

CSS学习笔记（一）1. 参考网址菜鸟教程2. CSS的创建2.1 插入样式表的三种方式外部样式表(External style sheet)内部样式表(Internal style sheet)内联样式(Inline style)/*外部样式表*/<head> <link rel="stylesheet" type="text/css" href="mystyle.css"></head>/*内部样式表，当单个文档需要特殊的样式时，就应该使
复制链接

扫一扫