css基础学习笔记

已于 2025-03-06 17:35:44 修改
阅读量783 收藏 15
点赞数 26
CC 4.0 BY-SA版权
文章标签： css 笔记 前端
于 2025-03-06 17:28:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43784866/article/details/146075783

css基础的学习

css的作用：网页布局，设置样式

css学习两大块内容： 1.选择器 2.属性与属性值

一.css书写的位置

1.内嵌式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 内嵌式：一般为了书写一些案例 */
        div {
            color:red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div>这是一个div</div>
</body>
</html>

2.行内式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 行内式：快速解决样式的问题 -->
    <div style="color:skyblue;font-size: 30px;text-align: center;">这是一个div</div>
</body>
</html>

3.外链式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 外链样式：为了让结构与样式分离，项目中都是这样使用 -->
    <link rel="stylesheet" href="./08.css">
</head>
<body>
    <div>这是一个div</div>
</body>
</html>

二.选择器

1.基本选择器

  • a.通配符（*）
  • b.标签选择器（e 如：p,h1,div,span…）
  • c.类选择器（以"."开头）
  • d.id选择器 (以"#"开头)

2.复合选择器

  • a.后代选择器 (空格 如： ul li)
  • b.子代选择器 ( > 如： ol > li)
  • c.并集选择器 ( , 如: div,span)
  • d.交集选择器 (什么都没有 如: li.second)

3.伪类选择器

  • :link 链接时样式
  • :visited 访问后样式
  • :hover 鼠标悬停时样式
  • :active 鼠标按下未松开时样式
  • :focus 获得焦点时样式

三.属性与属性值

1.字体

font-style: normal | italic

font-weight: 100–900 (normal:400 bold: 700)

font-size: 字体大小

font-family: 字体

line-height: 行高

字体简写(注意顺序)： font: font-style font-weight font-size/line-hight font-family

终极简写：font: font-size font-family

2.文本

  • a.文本颜色 color:

    颜色设置的几种方式

    1.英文 如： pink

    2.rgb 如： rgb(255,0,0)

    3.rgba 如： rgba(255,0,0,0.3)

    4.十六进制 如： #ff0000

  • b.文本对齐

    text-align: left | right | center

  • c.文本修饰

    text-decoration: none | underline | line-through

  • d.文本缩进

    text-indent: 2em

3.背景

background-color: 背景颜色

background-image: 背景图片

background-repeat: 背景是否平铺

background-position: 背景位置

background-attachment: 背景固定

复写： background:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./09-后代选择器.html">
    <title>Document</title>
    <style>

        div {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            background-image: url("./3.png");
            background-repeat: no-repeat;
            background-position: left bottom;

            /* 简写 */
            /* background:red url("./3.png") no-repeat right center; */
        }  
    </style>
</head>
<body>
    <div>我好想看见大家</div>
</body>
</html>

4.盒子模型

任何一个html标签都可以想像成是一个盒子（长方形）。

学习盒子模型的四块内容：边框（border），内边距(padding)，内容(content)，外边距(margin)

1.边框 border
  • border-style: 边框样式 如： solid(实线) dashed(虚线) dotted(点线)
  • border-width: 边框宽度
  • border-color: 边框颜色

​ 简写：border

​ 如：border: 2px solid #ccc;

边框圆角

border-radius: 10px;

2.内边距(padding)

​ 边框与内容之间的距离

3.内容(content)

​ width与height默认是内容的宽与高， 不是盒子的宽与高

4.外边距（margin）

作用：设置盒子与盒子之间的距离

语法：margin: 10px 上下左右

​ margin: 10px 20px 上下，左右

​ margin: 10px 20px 30px 上，左右，下

​ margin: 10px 20px 30px 40px 上，右，下，左

​ margin-left

外边距应用中的一些问题：

​ 1.兄弟元素：上下外边距合并，以间距数值大的为准

​ 2.父子元素：盒子塌陷

​ 解决方案：1.父盒子加border

​ 2.父盒子加padding

​ 3.父盒子加overflow:hidden

​ 3.盒子本身居中：

​ margin: 上下边距 auto;

盒子模型中注意的问题：

​ 清除一些标签的默认样式：

* {
	margin:0;
	padding:0
}

5.边框阴影

box-shadow: x轴的偏移量 y轴的偏移量 阴影的模糊值 阴影的大小 阴影的颜色 内阴影|外阴影(默认值)

6.文字阴影

text-shadow: x轴的偏移量 y轴的偏移量 阴影的模糊值 阴影的颜色=

7.浮动

作用：排版（将块级元素放置在一行）

为什么要浮动？用inline-block可不可以呢？在某一些情况下可以使用，但是中间可能有空白

我们就可以使用浮动float

语法： float: left | right

浮动的原理：让盒子本身漂起来了，不占用原来的空间

浮动特性：浮动的盒子相当于是一个行内块元素了

清除浮动：1.额外标签法 clear:both;

​ 2.父元素添加overflow:hidden

​ 3.单伪元素

​ 4.双伪元素

8.定位

作用：元素（盒子）有叠加的现象

分类：静态定位（static），相对定位(relative)，绝对定位(absolute)，固定定位(fixed)，

语法：定位模式+偏移值

1.相对定位relative

特点：

  • 1.不脱离标准流

  • 2.相对于自身原来的位置进行偏移

  • 3.还占据原来的位置

2.绝对定位absolute

特点：

  • 1.脱离标准流

  • 2.相对于父级元素进行偏移（父级一定要有定位），否则相对页面定位

  • 3.不占据原来的位置

布局时一个非常重要的口决：“子绝父相”

3.固定定位fixed

特点：

  • 1.脱离标准流

  • 2.相对于浏览器的视口进行偏移

  • 3.不占据原来的位置

9.显示与隐藏

元素隐藏：display:none 或 visibility:hidden

​ display与visibility的区别：display隐藏后不占据位置，visibility隐藏后占据位置

文本溢出隐藏：overflow:hidden | scroll

总结：overflow:hidden是一段神奇的代码，可以应用的场景？

​ 1. 文本溢出隐藏

​ 2. 盒子塌陷

	3. 清除浮动

10.css中的一些高级技巧

1.精灵图(sprite)

作用：将一些小的图片放置在一张大图上，为了减少服务器的压力

坐标基本上都是负值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            display: inline-block;
        }
        .x {
            width: 105px;
            height: 110px;
            background: url("images/abcd.jpg") no-repeat -252px -559px;
        }
        .s {
            width: 116px;
            height: 114px;
            background: url("images/abcd.jpg") no-repeat -252px -417px;
        }
    </style>
</head>
<body>
    <span class="x">x</span>
    <span class="s">s</span>
</body>
</html>
2.字体图标

字体图标看起来像是图片，本质是字体。可以设置颜色与大小

去哪里找字体图标？有很多的第三方库，bootstrap,iconmoon,iconfont…

第一步：下载

第二步：自定义字体图标

第三步：使用自定义字体图标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 定义字体 注意路径问题*/
        @font-face {
            font-family: 'abc';
            src: url('./iconmoon/fonts/iconfont.eot');
            src: url('./iconmoon/fonts/iconfont.eot?#iefix') format('embedded-opentype'),
            url('./iconmoon/fonts/iconfont.woff2') format('woff2'),
            url('./iconmoon/fonts/iconfont.woff') format('woff'),
            url('./iconmoon/fonts/iconfont.ttf') format('truetype'),
            url('./iconmoon/fonts/iconfont.svg#iconfont') format('svg');
        }
        /* 使用自定义的字体 */
        .iconfont {
            font-family: "abc" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-size: 80px;
            color:green;
        }

        /* font-family: "Microsoft yahe" 是因为我们的操作系统自带了字体*/
    </style>
</head>
<body>
    <span class="iconfont">&#xe6eb;</span>
</body>
</html>
3.利用css实现三角形
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 0px;
            height: 0px;
            border-width:10px;
            border-style:solid;

            border-top-width:20px;
            border-bottom-width:20px;
           
            border-top-color:red;
            border-right-color:blue;
            border-bottom-color:green;
            border-left-color:purple;

            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
4.鼠标样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li style="cursor:pointer">这是第1个li</li>
        <li style="cursor:text">这是第2个li</li>
        <li style="cursor:not-allowed">这是第3个li</li>
        <li style="cursor:move">这是第4个li</li>
    </ul>
</body>
</html>
5.清除input的淡蓝色框

​ outline:none

6.行内元素与行内块元素垂直方向的对齐方式

行内元素与行内块元素默认是基于基线(baseline)对齐的

共有四种对齐方式: vertical-align: top | middle | baseline | bottom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            /* vertical-align: bottom; */
            vertical-align: baseline;
            vertical-align: middle;
            vertical-align: top;
        }
    </style>
</head>
<body>
    <img src="./images/taobao.jpg" alt="">abp
</body>
</html>

常见应用：img图片下有一个空白如何去掉

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            border:2px solid red;
        }

        div img{
            /* display: block;*/
             vertical-align: top;
        }
    </style>
</head>
<body>
    <div>
        <img src="./images/taobao.jpg" alt="">
    </div>
</body>
</html>
7.单行文本省略号的写法：

三步曲：

 div {
     /* 三步曲 */
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

四.标签的显示模式

标签分为三大类： 块级元素 行内元素 行内块元素

1.块级元素的特点：

  • 独占一行
  • 可以设置宽高及内外边距
  • 宽度默认为父元素宽度100%,高度未设置时由内容决定,无内容时高度为0
  • 可以嵌套块级及行内标签

注意:p及h1-6标签中不能放块级元素，div中可以嵌套任意块元素

常见块元素： div h1-h6 p ul ol li form

2.行内元素：

a span

3.行内块元素：

img input

元素显示模式的相互转换

display: block | inline | inline-block

五.css的一些特性

层叠性：同一标签中的属性后面的值可以覆盖前面的值

继承性: 常见的继承属性有color, text-xxx, font-xxx, line-xxx

优先级：权重

(*与继承) 0 < 标签选择器 1 < 类选择器 10 < id选择器 100 < 行内样式 1000 < !important 无穷大

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值