《网页设计基础——CSS常用语法》

温稚生

已于 2022-09-30 18:01:17 修改

阅读量112

点赞数

分类专栏：网页设计文章标签： css html 前端

于 2022-06-18 21:40:00 首次发布

本文链接：https://blog.csdn.net/Dustpolaris/article/details/126941223

版权

网页设计专栏收录该内容

7 篇文章 4 订阅

订阅专栏

网页设计基础——CSS常用语法

一、注释；

例如：

/* 在此处书写注释 */

二、清除浏览器默认设置；

例如：

*{						/* 全局声明 */
    margin: 0;
    padding: 0;
}

三、CSS选择器；

1.标记选择器

<html>
	<head>
		<style>
    		p{
                font-size: 30px;
            }
		</style>
	</head>
	<body>
		<p>标记选择器</p>
	</body>
</html>

2.类别选择器

<html>
	<head>
        <style>
            .m{
                font-size=30px;
            }
        </style>
    </head>
    <body>
        <p class="m">类别选择器</p>
    </body>
</html>

3.ID选择器

<html>
	<head>
        <style>
            #m{
                font-size=30px;
            }
        </style>
    </head>
    <body>
        <p id="m">类别选择器</p>
    </body>
</html>

4.集体声明

<html>
	<head>
        <style>
            h1, #m{
                font-size=30px;
            }
        </style>
    </head>
    <body>
        <h1>一级标题</h1>
        <p id="m">类别选择器</p>
    </body>
</html>

5.后代选择器

规则：

用来选择元素或元素组的所有后代元素。

例如：

<html>
	<head>
        <style>
			ul{color:#00FFFF;}
			ul li{color:#FF0000;}			/* 所有li标签内的文本颜色都为红色 */
        </style>
    </head>
    <body>
        <ul>蓝色<li>红色</li>红色</ul>
        <ul>蓝色<ol>蓝色<li>红色</li>蓝色</ol>蓝色</ul>
    </body>
</html>

6.子元素选择器

规则：

与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。
如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器

例如：

<html>
	<head>
        <style>
			ul{color:#00FFFF;}
			ul>li{color:#FF0000;}			/* 第二个ul标签里“li标签内的文本颜色”不为红色 */
        </style>
    </head>
    <body>
        <ul>蓝色<li>红色</li>红色</ul>
        <ul>蓝色<ol>蓝色<li>蓝色</li>蓝色</ol>蓝色</ul>
    </body>
</html>

7.伪类选择器

规则

鼠标选中元素的各种状态。

例如：

<html>
	<head>
		<style>
			a:link {color: black;}				/* 访问之前的情况 */
			a:visited {color: green;} 			/* 访问过的情况 */
			a:hover {color: red;}				/* 鼠标悬停 */
			a:active {color: gray;}				/* 鼠标按下，尚未放开的情况 */
		</style>
	</head>
	<body>
		<a href="#">这是一个链接</a>
	</bpdy>
<html>

四、字体样式；

1.字体类型

规则：

若和下面的代码一样同时声明多个字体名称，则浏览器会先寻找“楷体”，若没找到则会继续寻找“宋体”，若代码所声明的所有字体都没有找到，则使用浏览器默认字体显示。

例如：

font-family: "楷体", "宋体";

2.字体大小

font-size: 8px;

3.字体粗细

font-weight: 800;

4.字体颜色

color: #FF0000;			/* 红色 */
color: #000000;			/* 黑色 */
color: #FFFFFF;			/* 白色 */
color: #0000FF;  		/* 蓝色 */
color: #FFFF00; 		/* 黄色 */

5.文字对齐

text-align: center;				/* 居中对齐 */
text-align: left;				/* 靠左对齐 */
text-align: right;				/* 靠右对齐 */

6.字体样式

font-style: italic;					/* 斜体 */
text-decoration: underline;			/* 下划线 */
text-decoration: overline;			/* 上划线 */
text-decoration: line-through;		/* 删除线 */

7.英文字母大小写

text-transform: capitalize;			/* 单词首字母大写 */
text-transform: uppercase;			/* 全部字母大写 */
text-transform: lowercase;			/* 全部字母小写 */

五、背景；

1.背景颜色

background-color: #FF0000;

2.背景图片

background-image: url(xxx.jpg);

3.背景图片大小

background-size: 500px 200px;		/* 宽度 高度 */

4.背景图片平铺

background-repeat: repeat;		/* 平铺 */
background-repeat: no-repeat;	/* 不平铺 */
background-repeat: repeat-x;	/* 水平平铺 */
background-repeat: repeat-y;	/* 垂直平铺 */

5.背景图片位置

background-position: center center;		/* 居中 */
background-position: 50% 50%;			/* 居中 */
background-position: 200px 100px;		/* 平面直角坐标系 */

温稚生

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
《网页设计基础——CSS常用语法》

网页设计基础——CSS常用语法一、注释；二、清除浏览器默认设置；三、CSS选择器；四、字体样式；五、背景；
复制链接

扫一扫

专栏目录

《网页设计基础——CSS常用语法》

网页设计基础——CSS常用语法

一、注释；

例如：

二、清除浏览器默认设置；

例如：

三、CSS选择器；

1.标记选择器

2.类别选择器

3.ID选择器

4.集体声明

5.后代选择器

6.子元素选择器

7.伪类选择器

四、字体样式；

1.字体类型

2.字体大小

3.字体粗细

4.字体颜色

5.文字对齐

6.字体样式

7.英文字母大小写

五、背景；

1.背景颜色

2.背景图片

3.背景图片大小

4.背景图片平铺

5.背景图片位置

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