前端CSS笔记整理

信小呆666

已于 2022-06-07 14:21:32 修改

阅读量127

点赞数

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

于 2022-06-01 20:24:58 首次发布

本文链接：https://blog.csdn.net/weixin_44480609/article/details/125059263

版权

大前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.骨架

<!--DOCTYPE：告诉浏览器使用什么规范（默认是html）-->
<!DOCTYPE html>
<!--语言 zh中文 en英文-->
<html lang="en">
<!--head标签代表网页头部-->

<head>
    <!--meta 描述性标签，表示用来描述网站的一些信息-->
    <!--一般用来做SEO（搜索）-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--网站标题-->
    <title>Document</title>
    <style>
        p {
            color: red;
        }
    </style>
    <!-- <link rel="stylesheet" href="css/style.css" />
</head>
<!--body代表主体-->

<body>

    <p>hello</p>
</body>

</html>

1.1 CSS的3种导入方式

第一种：内部样式

 <style>
        p {
            color: red;
        }
    </style>

第二种：外部样式

 <link rel="stylesheet" href="css/style.css" />

第三种：行内样式

 <p style="color: red">hello</p>

推荐用外部样式
在这里插入图片描述

2、选择器

2.1 基础选择器

<body>
    <p class="one" id="one">我是老一</p>
    <p class="one" id="two">我是老二</p>
    <p class="three" id="three">我是老三</p>
</body>

2.1.1 标签选择器

所有标签统一样式

p{
    color: blue;
}

2.1.2类选择器

class选择器，可以几个标签公用样式，可以复用

.one{
    color: blue;
}
.three{
    color: red;
}

2.1.3 id选择器

id是唯一的

#one{
    color: blue;
}
#two{
    color:chartreuse
}
#three{
    color: red;
}

2.2 层次选择器

2.2.1 后代选择器

body p {
    color: blue;
}

2.2.2 子选择器

body>p {
    color: blue;
}

2.3属性选择器

id或者class配个标签一起使用

 .demo p

3.基本样式

3.1 span标签和文字样式

<body>
    <p class="one" id="one">我是老一</p>
    <p class="one" id="two">我是老二</p>
    <p class="three" id="three"><span id="font">我是老三</span></p>
</body>

#font {
    /*字体系列*/
    font-family: '微软雅黑';
     /*字体大小*/
    font-size: 25px;
     /*字体粗细 可以用数字1-900*/
    font-weight:bold;
     /*字体颜色*/
    color: red;
}

3.2文本样式

<p id="stext"><span >我是老四，不是老六，也不是老八，你个老六我是服了，你个老八，吃我汉堡</span></p>

#stext {
    /*文本颜色*/
    color: blue;
    /*文本对齐方式*/
    text-align: center;
    /*首行缩进*/
    text-indent: 20em;
    /*行高*/
    line-height: 10px;
    /*下划线 underline 中划线line-through 上划线 overline*/
    /*超链接去下划线 none*/
    text-decoration: underline;
}

3.3 超链接样式

  <a href="#">百度一下，你就知道</a>

 /* 鼠标悬浮*/
a:hover{
    color: red;
    font-size: 30px;
}
/* 鼠标按主未释放的状态 */
a:active{
    color:aqua
}
/* 未访问的链接 */
a:link{
    color:blue;
}
 /* 已访问的链接 */
 a:visited{
    color: darkmagenta;
}

3.4 阴影

 <p id="price">我是老一</p>

#price{
    /* text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/
    text-shadow: #008800 20px -10px 2px;
}

3.5 列表

  <div id="nav">
        <h2 class="title">全部商品分类</h2>
        <ul>
            <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音响</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
            <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
            <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
            <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
            <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
            <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">中标</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
            <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
            <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>
        </ul>
    </div>

#nav{
    width: 300px;
    background: darkgrey;
}

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: red;
}

ul{
    background: darkgrey;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

3.6 背景

background-image:url(“”);/默认是全部平铺的/
background-repeat:repeat-x/水平平铺/
background-repeat:repeat-y/垂直平铺/
background-repeat:no-repeat/不平铺/

 background: darkgrey;

background-image: url("../images/b.jpg");

3.7 渐变

body{
    background-color: #FFFFFF;
    background-image: linear-gradient(66deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%);
}

4.盒子模型 div样式

margin：外边距
padding：内边距
border：边框

4.1 边框和高度，宽度

    <div id="div1">

    </div>
    <div id="div2">

    </div>

dashed虚线 solid实线

#div1{
    height: 100px;
    width: 100px;
    border: 3px dashed blue;
}

4.2 内边距，外边距

  <div id="div1">
        <div id="div2"></div>
    </div>

#div1{
    height: 100px;
    width: 100px;
    padding: 10px;
    border: 3px solid blue;
}

#div2{
    height: 50px;
    width: 50px;
    margin-top: 10px;
    border: 3px solid red;
}

4.3 圆角边框

 border-radius: 100px 100px 100px 100px;

4.4 div阴影

box-shadow: 10px 10px 100px yellow;

5.浮动

块级元素：独占一行 h1~h6 、p、div、列表…
行内元素：不独占一行 span、a、img、strong

5.1display

block：块元素
inline：行内元素
inline-block：是块元素，但是可以内联，在一行
none：消失

5.2 float浮动

 float: left;

5.3 overflow

right：右侧不允许有浮动元素
left：左侧不允许有浮动元素
both：两侧不允许有浮动元素
none：

6 定位

6.1 相对定位 relative

    position: relative;
    /*相对定位 上下左右*/
    top: -20px;/*向上偏移20px*/
    left: 20px;/*向右偏移20*/
    bottom: -20px;/*向下偏移20px*/
    right: 20px;/*向左偏移20px*/

6.2 绝对定位 absolute

定位：基于xxx定位，上下左右~
1、没有父级元素定位的前提下，相对于浏览器定位
2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移
3、在父级元素范围内移动

    position: relative;
    /*相对定位 上下左右*/
    top: -20px;/*向上偏移20px*/
    left: 20px;/*向右偏移20*/
    bottom: -20px;/*向下偏移20px*/
    right: 20px;/*向左偏移20px*/

6.3 z-index 图层

z-index：默认是0，最高无限~999

1、z-index 需要配合position
2、CSS中设置属性position后z-index才有效果
3、z-index表示层叠数值，数值越大越靠上，数值月越小越靠下方
4、设置position后标签属性是可以重叠的
5、设置position属性后同时top bottom、left、right 相对位置也生效、否则以上属性全无效

信小呆666

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端CSS笔记整理

1.骨架<!DOCTYPE html><html lang="en"><head>   <meta charset="UTF-
复制链接

扫一扫