4.9 CSS基础入门

最新推荐文章于 2025-06-20 13:36:46 发布

原创最新推荐文章于 2025-06-20 13:36:46 发布 · 231 阅读

0 ·

CC 4.0 BY-SA版权

前端基础部分专栏收录该内容

9 篇文章

订阅专栏

首先咱们来说一下选择器，大致可以分为三种：

p {
     color: red;
 }
 /*标签选择器 作用于当前页面素有匹配标签*/
 .green{
     color: red;
 }
 /*类选择器 作用于当前页面所有class值为green的标签*/
#color{
    color: red;
}
 /*id选择器 在当前页面具有唯一性*/

css的写法：分三类
优先级：行内样式>内部样式>外部样式
以上效果的实现要符合“就进原则”

<p>
    电脑 <span style="color: red;font-size: 40px">1</span>元起
    <!-- 1行内样式： 样式只在当前标签可用，写法比较繁琐，这种写法要极力避免-->

</p>

    
<style>
    price{
        color: #red;
    }
</style>
<p>    电脑 <span id="price">1</span>元起    <!-- 2内部样式： 只在当前页面，比行内写法要好一些。缺点：多个页面无法共用一个样式--></p>

		(<link rel="stylesheet" href="prices"/>) 表引用外部样式表

<p>

     电脑 <span id="prices">1</span> 元起
    <!-- 外部样式表：推荐写法！ 样式可以复用，做到了文本样式的分离-->
</p>

以上是样式的基本用法

一些基本属性用法

font-family: "隶书","仿宋","sans-serif";
/*前面字体族名称 最后一个是类族名称
浏览器在显示字体的时候，依次判断是否支持当前的字体，直到最后的字体系列*/
/*font-family："隶书","仿宋",sans-serif*/
font-weight: bolder;
/*bold 加粗  bolder更粗   lighter 细体*/
font-size: 30px;
/*font-size 取值：具体的px值，2：百分比（默认字体大小16px）*/
font-style: inherit;
/*字体的显示格式*/
color: red;
/*字体颜色*/
opacity: 0.1;
/*透明度0是全透 1是正常值*/

line-height: 70px;
/*行高 单行字体占用的高度 px  %
通过设置文本的行高与外部容器高度一致，可以实现文本垂直居中*/
text-align: justify;
/*justify 两端对齐 right=end 右对齐  left=start 左对齐（默认） center 居中*/
letter-spacing:normal;
/*字符间距： px  normal */
text-decoration: underline;
/*文本修饰 上划线 中划线 下划线*/
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
/*三个属性配合实现单行超出文本隐藏*/
text-shadow: 2px 2px #c9ff3a;
/*文本阴影颜色 x方向的偏移 y方向的偏移  阴影的颜色*/

-webkit-text-stroke: 2px #fff8ba;
/*/!*文本面变颜色 描边的宽度 描边的颜色*!/*/
text-indent: 2em;
/*悬挂缩进*/
background-color: white;
/*背景颜色*/
background-image: url("../img/logo_kouhao.png");
/*背景图添加方式*/
background-repeat: no-repeat;
/*背景图片的展示方式*/
background-position: 160px 130px ;
/*背景图片的位置*/
background-size: contain;
/*背景图片的大小
contain: 图片宽高等比例缩放，直到款或高填满父布局，可能出现图片填充布局不完整
cover: 图片宽高等比例缩放，直到较小的宽或高填满父布局，可能出现图片溢出。*/