前端新手入门2 css基础

屁颠屁颠跟屁虫

已于 2022-10-19 20:27:56 修改

阅读量307

点赞数 1

分类专栏：前端基础文章标签： css html 前端

于 2022-10-18 10:46:53 首次发布

本文链接：https://blog.youkuaiyun.com/Rosia629/article/details/127353413

版权

前端基础专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了CSS中常见的文本样式属性，如字体、颜色、对齐方式等，并讲解了元素的显示模式，包括块元素、行内元素和行内块元素的转换。此外，还探讨了选择器的使用，如标签选择器、类选择器、ID选择器等，以及如何通过组合选择器实现更精确的样式设置。文章还涉及了背景属性、CSS过渡动画、border-radius圆角边框和阴影效果的创建方法，提供了实例代码以加深理解。

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

常见的文本样式属性：

font-size文本大小
font-family字体
font-weight粗细
font-style是否倾斜
text-decration装饰线
color文本颜色
text-align对齐方式
text-indent缩进字符
line-height行高

元素的显示模式：

块元素

独占一行，可以设置宽高，如果不设置，默认宽度和父级盒子一样宽，设置内外边距都生效，div可以嵌套任何元素，p标签里不能嵌套div浏览器会解析成2个p和一个div，p里面只能放一行多个的小标签，不能放div

行内元素

一行放多个，默认的宽是由内容多少撑开的，给行内元素直接设置宽高是不生效的；设置内外边距上下不生效，左右生效，行内元素中只能嵌套文本图片或者其他行内元素，但是超链接a里面可以嵌套块级元素；超链接a里面不能嵌套超链接a；

行内块元素

一行可以共存多个，可以设置宽高都生效，如果不设置宽度，默认的宽是由内容多少撑开的，给行内块元素设置宽高和内外边距都生效

元素显示模式之间的转化display

将元素转化为块元素（重点） display:block
将元素转化为行内元素 display:inline
将元素转化为行内块元素 display:inline-block

选择器：

标签选择器：选择整个html页面全部该标签，指定统一的样式，实现不了差异化样式设置，与后代选择器配套使用
类选择器：在样式里“.类名”选择标签设置样式，用的最多的是多类名调用：一个标签设置一个class属性，要想设置多个类名，用空格隔开即可
id选择器：在css中用 #id名称 {设置样式} 的格式设置样式，在标签中用id="id名称"给元素起名字，每个id只能设置一个名称，不能重复使用
通配符选择器：用一个*表示选中了当前所有元素，来设置统一的样式

以上介绍的是基础选择器，下面介绍复合选择器：

后代选择器：选择器1 选择器2 { css样式 }（将祖先元素和后代元素用空格隔开）；后代元素可以是子元素，也可以是孙子级别的元素，只要有嵌套关系就可以查找到
子代选择器：选择器1>选择器2 { css样式 }（用>将父级和子级相连接）；后代元素必须是子元素（亲儿子），不可以是孙子级别的元素
交集选择器：选择器1选择器2 { css样式 }（将两个基础选择器连着书写，推荐标签选择器和类选择器的搭配使用）；交集选择器可以更加精准的选择某一个元素，相当于既又关系，也就是两个需求都要满足
并集选择器：选择器1，选择器2 { css样式 }（将两个选择器用英文逗号隔开）；如果一些元素样式完全一致，我们可以通过并集选择器合并起来书写，经常用来集体声明某一些标签的共有样式，节约代码
伪类选择器：选择器:伪类状态 { css样式 }（英文状态的冒号将选择器和伪类状态连接）

background背景属性：

bgc背景颜色 background-color: ；
bgi 背景图片 background-image: url(背景图片的路径);
bgr背景是否平铺 background-repeat: no-repeat;水平方向平铺 background-repeat: repeat-x;
垂直方向平铺 background-repeat: repeat-y;
bgp背景位置设置 background-position
bga背景固定background-attachment；默认取值scroll滚动 background-attachment: scroll；不滚动 background-attachment: fixed；
背景属性综合写法：背景颜色背景图片图像滚动平铺方式图片位置；属性值没有书写顺序，没有的属性可以省略不写；属性值和属性值之间用空格隔开；
bgs background-size背景尺寸
透明 rgba写法alpha取值为0-1之间，0表示完全透明，1表示不透明，之间的数字表示透明的程度，只颜色透明不会影响内容； opacity属性：opacity 设置盒子的透明，取值为0-1之间，0表示完全透明，1表示不透明，之间的小数表示透明的程度：不仅背景颜色透明，里面的内容也透明

transition css过渡动画

transition: 属性时间运动曲线延时

同时修改多个属性，需要用英文逗号隔开，用逗号隔开书写多个属性过渡太麻烦，我们只需要用一个all表示所有的属性即可，transition: all 1s ，过渡加在本身上，谁做动画给谁加

 <style>
        .box {
            width: 400px;
            height: 40px;
            background-color: #333;

        }
        .bar {
            width: 20%;
            height: 40px;
            background-color: red;
 /* 设置进度条过渡后的动画，过渡时间为3S */
            transition: all 3s;
        }
 /* 设置鼠标悬停时的进度条的变化样式 */
        .box:hover .bar {
            width: 100%;
            background-color: gold;
            border-radius: 20%;

        }
    </style>

<body>
    <div class="box">
        <div class="bar"></div>
    </div>
</body>

这里是实现的一个进度条的过渡动画仅供参考帮助理解~

border-radius圆角边框

可以取值为实际像素，也可以取值为百分比，以下是常见的几个特例

<style>
        .yuanjiao {
            width: 200px;
            height: 100px;
            background-color: rgb(17, 164, 115);
            border-radius: 20px;
        }
        .yuan {
            width: 100px;
            height: 100px;
            background-color: rgb(207, 207, 10);
            border-radius: 50%;
        }
        .jn {
            width: 200px;
            height: 100px;
            background-color: brown;
            border-radius: 60px;
        }
        .ty {
            width: 200px;
            height: 100px;
            background-color: brown;
            border-radius: 50%;
        }
        .zby{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            border-radius: 60px 0 0 60px;
        }
        .yby{
            width: 100px;
            height: 100px;
            background-color: cadetblue;
            border-radius: 0 60px 60px 0 ;
        }
    </style>
<body>
    <!-- 圆角border-radius -->
    <h4>圆角矩形：设置border-radius取值为实际像素值</h4>
    <div class="yuanjiao"></div>
    <h4>正圆：盒子必须是正方形，border-radius取值为高度的一半或者50%</h4>
    <div class="yuan"></div>
    <h4>胶囊形状:盒子必须是长方形，border-radius取值大于等于高度的一半</h4>
     <div class="jn"></div>
     <h4>椭圆：盒子是长方形，border-radius取值为50%</h4>
     <div class="ty"></div>
     <h4>半圆：border-radius：左上角  右上角  右下角 左下角；</h4>
     <div class="zby"></div>
     <br><br>
     <div class="yby"></div>
</body>

以上代码方便理解~