css-web前端必须掌握的基础部分1-CSDN博客

本文链接：https://blog.csdn.net/qq_50012618/article/details/120847645

这篇博客详细介绍了CSS的三种引入方式：外部样式表、内部样式表和内联样式表，并通过实例展示了如何使用@import导入其他CSS文件。同时，文章涵盖了背景色、背景图、文本样式和常见选择器的用法，包括颜色表示、背景尺寸调整、文本对齐、选择器优先级等知识点，是理解CSS样式的实用教程。

摘要由CSDN通过智能技术生成

<title>css的引入方式</title>

<style>

/* 引入其他的css样式 */

@import url("css/second.css");

/* 内部样式表 */

div{

width: 100px;

height: 100px;

background-color: red;

}

</style>

</head>

<body>

</body>

<title>背景色</title>

<style>

div{

width: 200px;

height: 100px;

/* background-color: gold; */

/* background-color: rgba(255,0,0,1); */

background-color: #ff0000;

}

</style>

</head>

<body>

</body>

</html>

</html>

<title>背景图</title>

<style>

img{

width: 180px;

height: 100px;

}

div{

width: 400px;

height: 400px;

background-color: red;

background-image: url(img/dm.png);

background-size: cover;

background-position: center center;

background-repeat: no-repeat;

}

</style>

</head>

<body>

<div>

<p>这是一只瑞希</p>

</div>

</body>

</html>

<!-- background-size:w(宽度) h(高度);

如果只给其中一个，另一边会等比例变化

两个特殊的值：contain：图片的场边占满父级

cover：图片的短边占满父级-->

<title>文本</title>

<style>

margin: 0;

padding:0;

}

html{

font-size:16px;

}

color: skyblue;

/* height: 50px; */

background-color: pink;

font-size: 30px;

/* 14px是一般浏览器允许的最小像素，16px是浏览器的默认像素 */

/* font-size: 4em; */

font-family: 'Courier New', Courier, monospace ;

/* 文本对齐方式 */

text-align: left;

line-height: 50px;

/* 首行缩进 */

text-indent: 2em;

/* text-indent: 100px; */

/* 字体间距 */

letter-spacing: 5px;

/* 单词间距 */

word-spacing: 10px;

/* 文本大小写 */

text-transform: uppercase;

}

/* 文本装饰线 */

font-size: 40px;

text-decoration:none;

}

</style>

</head>

<body>

<p>巴卫这只狐狸很帅气，巴卫这只狐狸很帅气，巴卫这只狐狸很帅气，巴卫这只狐狸很帅气</p>

<p>welcome to csdn</p>

</body>

</html>

<title>常用的选择器</title>

<style>

margin: 0px;

padding: 0px;

list-style: none;

}

h1,p{

/* 群组选择器 */

color: red;

}

.c{

/* class选择器 */

color: green;

}

#big{

font-size: 30px;

color: blue;

}

div p{

/* 后代选择器 */

color: cyan;

}

div>p{

/* 子代：直接子集 */

color: pink;

}

/* 属性选择器 */

[class="ok"]{

/* 最好具体带上之后的名称，哪个标签有class */

color: gold;

}

</style>

</head>

<body>

<h1>welcome to csdn</h1>

<ul>

</ul>

<div>

<p>人生若只如初见</p>

<span><p>何事秋风悲画扇</p></span>

</div>

</body>

</html>

@import url("second.css");

/* 在css里面引入其他的css文件 */

first.css

div{

width: 200px;

height: 200px;

background-color: pink;

}

second.css

css的引入方式

背景色

背景图

文本

常用的选择器