css

最新推荐文章于 2025-02-14 21:24:47 发布

原创最新推荐文章于 2025-02-14 21:24:47 发布 · 263 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了CSS的基本概念，包括定义方法、引入方式及常用选择器。此外还详细讲解了布局和文本样式属性，如width、height、color等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css：层叠样式表，可以将网页的内容的样式能拆开，那么html中的大部分表现样式的标签就废了，

html只负责文档的结构和内容，表现形式就完全交给css。

1. css的定义方法：

选择器 {属性：值；属性：值；属性：值；}

选择器是将样式表和页面元素关联起来的名称，属性是希望设置的样式属性，每一个属性有 

一个或者多个值。

div{ width:100px; height:100px; background:gold; }

2. css引入的方式：

内联式：通过标签的style属性，在标签上直接写样式。

<div style="width:100px; height:100px; background:red ">......</div>

嵌入式：通过style标签，在网页上创建嵌入式的样式表。

<style type="text/css"> div{ width:100px; height:100px; background:red } ......</style>

3. 外链式：通过link标签，链接外部样式文件到页面中。

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

css常用的选择器:

1.标签选择器：此种选择器影响范围大，一般用来做一些通用设置，活在层次选择器中。

div{color:red} ......<div>这是第一个div</div> <!-- 对应以上样式 --><div>这是第二个div</div> <!-- 对应以上样式 -->

2. 类选择器：通过类名来选择元素，一个类可用在多个元素，一个元素也可使用多个类，应用灵

活。也是css中应用最多的一种选择器。

.blue{color:blue}.big{font-size:20px}.box{width:100px;height:100px;background:gold} ......<div class="blue">....</div><h3 class="blue big box">....</h3><p class="blue box">....</p>

3. 层次选择器：主要应用在标签嵌套的结构中，层次选择器，是结合上面的两种选择器来写 

的选择器，它可以与标签选择器结合进行使用，减少命名，同时也可以通过层级，限制样式 

的作用范围。

.con{width:300px;height:80px;background:green}.con span{color:red}.con .pink{color:pink}.con .gold{color:gold}<div class="con"> <span>....</span> <a href="#" class="pink">....</a>
 <a href="#" class="gold">...</a></div><span>....</span><a href="#" class="pink">....</a>

例子：

<head>

<style>

.con{

color:blue;

background:dark;}

.con more{

width:100px;

font-size:100px;}

调用:

<div class="con">

<more>

luobingting

</more>

</div>

css属性入门：

布局常用样式属性：

width : 设置元素的宽度：width: 100px ;

height 设置元素(标签)的高度，如：height:200px;
background 设置元素背景色或者背景图片，如：background:gold; 设置元素背景色为金色
border 设置元素四周的边框，如：border:1px solid black; 设置元素四周边框是1像素宽的黑色实线

以上也可以拆分成四个边的写法，分别设置四个边的：

border-top 设置顶边边框，如：border-top:10px solid red;
border-left 设置左边边框，如：border-left:10px solid blue;
border-right 设置右边边框，如：border-right:10px solid green;
border-bottom 设置底边边框，如：border-bottom:10px solid pink;
padding 设置元素包含的内容和元素边框的距离，也叫内边距，如padding:20px;padding是同时设置4个边的，也可以像border一样拆分成分别设置四个边:padding-top、padding-left、padding-right、padding-bottom。
margin 设置元素和外界的距离，也叫外边距，如margin:20px;margin是同时设置4个边的，也可以像border一样拆分成分别设置四个边:margin-top、margin-left、margin-right、margin-bottom。
float 设置元素浮动，浮动可以让块元素排列在一行，浮动分为左浮动：float:left; 右浮动：float:right;

文本常用样式属性一：

color 设置文字的颜色，如： color:red;
font-size 设置文字的大小，如：font-size:12px;
font-family 设置文字的字体，如：font-family:'微软雅黑';为了避免中文字不兼容，一般写成：font-family:'Microsoft Yahei';
font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
line-height 设置文字的行高，如：line-height:24px; 表示文字高度加上文字上下的间距是24px，也就是每一行占有的高度是24px
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉