css学习笔记

最新推荐文章于 2024-05-30 14:49:04 发布
最新推荐文章于 2024-05-30 14:49:04 发布
阅读量155 收藏
点赞数
文章标签： 1024程序员节
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Splitss/article/details/120939230
版权

css

css插入

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

选择器

基本选择题

id选择器

#+id{style}

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #abc{color :red;}
        #2{color :blue;}
    </style>
</head>
<body>
<h1 id="abc">12345</h1>
<h1 id="2">1234</h1>
<h1 id="3">123</h1>
标题选择器

标题{}

    <style>
        h1{
        color:blue;
        background:red;
        }
    </style>
</head>
<body>
<h1>biaoti</h1>
类选择器

class=“name”

.+classname{}

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .abc{color : red;}
    </style>
</head>
<body>
<h1 class="abc">12345</h1>
<h1 class="2">1234</h1>
<h1 class="3">123</h1>
</body>

层次选择器、

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
/*后代选择器*/
    /*body p{
    background : blue;
}*/
       /*子选择器*/
       body>p{
       background : blue;
       }*/
/*相邻兄弟选择器 只有一个向下的邻居*/
    /*.active~p{
background :blue;
    }*/
    /* ul的第一个元素*/
ul li:first-child{
    background-color:blueviolet
}
/*ul的最后一个元素*/
ul li:last-child{
background-color: chocolate;
}
/*定位到父元素，定位到当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才可以生效*/
p:nth-child(1){
    background-color: darkcyan;
}
/*选中父元素，下面p元素的第三个 按类型*/
p:nth-of-type(3){
    background-color:darkgoldenrod;
}
h1:hover{
    background-color: darkred;
}
    </style>
</head>
<body>
<p class="active">p0</p>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<u1>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>

    </li>
    <li>
        <p>p6</p>

    </li>
    <li>
        <p>p7</p>

    </li>

</u1>
<h1>555</h1>
</body>

结构伪类选择器

属性选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         a{
        float: left;
        display: block;
        height: 50px;
        width: 50px;
        border-radius: 10px;
        background-color:rgb(43, 55, 226);
        text-align: center;
        color:black;
        text-decoration: none;
        margin-right: 5px;
         font: bold 20px/50px Arial;
        }
/* 存在id属性的元素 */
/* a[id]{
    background-color: chartreuse;
} */
/* *=包含这个元素 */
/* a[class*="links item"]{
    background-color: darkgoldenrod;
} */
/* ^=以这个开头 */
/* a[href^="http"]{
    background-color: rgb(167, 26, 167);
} */
/* %=以这个结尾 */
/*a[href$="html"]{
    background-color: rgb(224, 48, 86);
}*/
    </style>
</head>
<body>
<a href="http://www.baidu.com" class="links item first" id="first" width=100px>1</a>
<a href="" class="links item active" target="_blank" title="text">2</a>
<a href="images/images.html" class="linnks item">3</a>
<a href="images.jpg" class="linnks item">4</a>
<a href="images/123.jpg" class="linnks item">5</a>
<a href="images/123.html" class="linnks item">6</a>
<a href="images/123.png" class="linnks item">7</a>
<a href="abc.doc" class="linnks item last">8</a>
</body>

lesson2

span标签

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title1{
            font-size: 50px;
        }
    </style>
</head>
<body>
欢迎进入<span id="title1">我的世界</span>
</body>

列表

list-style none 去除圆点
circle 空心圆
decima 数字

1.有序列表

  1. 无序列表

字体样式

font:

font-family 字体
font-size 字体大小
font-weigth 字体粗细
color 字体颜色

  <style>
  /*字体风格*/
      p{
      font :oblique bolder 20px "楷体";
      }
  </style>
</head>
<body>
<p>[1]  三指文体名。随着时代的发展，散文的概念由广义向狭义转变，并受到西方文化的影响。
  散文是一种抒发作者真情实感、写作方式灵活的记叙类文学体裁。“散文”一词大概出现在北宋太平兴国（976年12月-984年11月）时期。
  《辞海》认为：中国六朝以来，为区别韵文与骈文，把凡不押韵、不重排偶的散体文章（包括经传史书），统称“散文”。后又泛指诗歌以外的所有文学体裁。
</p>

  <style>
      body{
      font-family: 楷体;
      }
      p{
      font-size:20px;
      }
  </style>

文本样式

​ text-indent: 2em 首行缩进
​ text-align:center 文本居中
​ height: 300px 高
​ line-height: 300px 行高
​ text-decoration: underline 下划线
​ text-decoration: line-through 删除线
​ text-decoration: overline 上划线
​ vertical-align：属性设置元素的垂直对齐方式

渐变

background-image: linear-gradient(19deg #21d4FD 0%， #B721FF 100%);

背景

background-image: 背景照片

background-repeat：属性设置是否及如何重复背景图像。 默认地,背景图像在水平和垂直方向上重复

repeat-x 背景图像将在水平方向重复。

repeat-y 背景图像将在垂直方向重复

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 1000px;
            height: 700px;
            border: 1px;
            background-image: url(/html/image/1.jpg);
        }
        .div1{
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>

超链接伪类

text-decoration: none 文字修饰为无

a:hover 设置链接点击颜色

font-size：文字大小

text-shadow：文字阴影

lesson3

圆形

border-radius: x x x x; 左上 右上 右下 左下 （顺时针）

圆角边框

    <style>
div{
    width: 100px;
    height: 100px;
    border: 10px solid red;
    border-radius: 50px 20px;
}
    </style>

外边框

margin 外边距

padding 内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }


        h2{
            font-size: 16px;
            background-color: #3cbda6;
            line-height: 30px;

        }
        #app{
            width: 300px;
            border: 1px solid blue;
        }
form{
    background:#3cbda6;
}
div:nth-of-type(1) {
    border: 3px dashed black;
}
div:nth-of-type(2){
    border: 3px solid black;
}
    </style>
</head>
<body>
<div id="app">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>姓名：</span>
            <Input type="text"></Input>
        </div>
        <div>
            <span>密码：</span>
            <Input type="text"></Input>
        </div>
        <div>
            <span>密码：</span>
            <Input type="text"></Input>
        </div>    <div>
        <span>邮箱：</span>
        <Input type="text"></Input>
    </div>
    </form>
</div>
</body>
</html>

浮动

​ clear rigth 右侧不允许有浮动元素
​ clear left 左侧不允许有浮动元素
​ clea both 两侧不允许有浮动元素
​ clea none 清除浮动
​ 解决办法
​ 1增加父级元素高度
​ 2增加一个空的div 清除浮动
​ overflow hidden 溢出隐藏给一个元素

盒子模型

margin 外边距

padding 内边距

阴影

box-shadow 设置阴影

<style> 
div
{
width:300px;
height:100px;
background-color:#ff9900;
-moz-box-shadow: 10px 10px 5px #888888;
box-shadow: 10px 10px 5px #888888;
}
</style>

lesson4 (消除浮动)

父级元素中手动添加一个块级元素来消除浮动

解决办法

1增加父级元素高度

2增加一个空的div 清除浮动

overflow hidden 溢出隐藏给一个元素

#father::after{
    content: "";
    display: block;
    clear: both;
    }
div{
    border: 1px solid blue;
    width: 100px;
    height: 50px;
}
#pho{
height: 100px;
width: 100px;
float: left;
}
#cosd {
    width: 200px;
    height: 100px;
}

定位

绝对定位

没有父级元素时候，相对于浏览器偏移
假设父级元素存在定位，我们通常会相对于父级元素进行偏移

position: absolute;

top: 向顶部偏移

left: 向左边偏移

bottom: 向下偏移

right: 向右偏移

        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
          border: 1px solid rgb(233, 103, 17);
          position: relative;
        }

相对定位

position: relative;

top: 向顶部偏移

left: 向左边偏移

bottom: 向下偏移

right: 向右偏移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            padding: 30px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
          border: 1px solid rgb(233, 103, 17);
        }
        #fris{
            background-color: aquamarine;
            border: 1px solid rgb(219, 252, 72);
            position: relative;
            top: -20px;
            left: 20px;
        }
        #second{
            background-color: blueviolet;
            border: 1px solid rgb(1, 97, 104);
            position: relative;
            bottom: 10px;
        }
        #third{
            background-color: cornflowerblue;
            border: 1px solid rgb(255, 59, 245);
            position: relative;
            right: 20px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="fris">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

固定定位

position: fixed

top: 向顶部偏移

left: 向左边偏移

bottom: 向下偏移

right: 向右偏移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background: burlywood;
            position: absolute;
            right: 0px;
            bottom: 0px;
        }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0px;
            bottom: 0px;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

Zindex

元素叠加

​ position:absolute;

​ z-index:

​ opacity: 透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul,li{
            padding: 0;
            list-style: none;
            margin: 0;
        }
#content{
    padding: 0;
    margin: 0;
    font-size: 25px;
    overflow: hidden;
    line-height: 25px;
    border: 1px solid black;
    width: 300px;
    height: 300px;
}
#content ul{
    position: relative;
}
.tiptext,.tipbg{
    position:absolute;
    top: -200;
    width: 300px;
    height: 25px;

}
.tipbg{
    background-color: cornflowerblue;
    opacity: 0.5; /* 透明度 */

}
.tiptext{
    z-index: 999;
    color: coral;
}
    </style>
</head>
<body>
<div id="content">
    <ul>
        <li><img src="/html/image/1.jpg" height="200px" width="300px" alt=""/></li>
        <li class="tiptext">老铁没毛病</li>
        <li class="tipbg"></li>
        <li>时间：2020-10-23</li>
        <li>地点：中国</li>
    </ul>

</div>
</body>
</html>
Splitss
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS 学习笔记
09-25
在CSS学习过程中，了解并熟练掌握ID和Class的使用是非常基础且重要的。ID与Class都是CSS选择器，但它们有着不同的特性和应用场景。 ID选择器（#）的主要优点在于其高优先级，这意味着当需要为特定元素赋予特殊样式...
CSS学习笔记
m0_58761900的博客
09-18 3052
5.1 边框:border 5.2 内边距：padding 5.3 外边距:margin 5.4 块级元素的水平居中 7.1 弹性布局：flex 7.2 水平方向的排列方式：justify-content 7.3 垂直方向的排列方式：align-items
css学习笔记1
qq_42236791的博客
12-12 921
HTML（结构）、CSS（表现）、行为（JavaScript）CSS的全称：层叠样式表（Cascading Style Sheets）。CSS也是一种标记语言，用于给HTML结构设置样式，例如：文字大小、颜色、元素宽高等。简单理解：CSS可以美化HTML，让HTML更漂亮。核心思想：HTML搭建结构，CSS添加样式，实现了：结构与样式的分离。
EPICS工具CSS学习笔记
qq_43456972的博客
10-13 2260
控制系统工作室(CSS)是一项实现控制系统相关的应用，主要针对的是操作员界面。它是基于目前的软件技术（Java、Eclipse），并特别强调了互操作性。 使用Centos7.0系统作为EPICS环境开发，搭建了CSS基础的控件操作，并成功运行。
CSS学习笔记目录
wz_1992的博客
05-30 448
CSS学习笔记之基础教程（一） CSS学习笔记之基础教程（二） CSS学习笔记之中级教程（一） CSS学习笔记之中级教程（二） CSS学习笔记之中级教程（三） CSS学习笔记之高级教程（一） CSS学习笔记之高级教程（二） CSS学习笔记之高级教程（三） CSS学习笔记之高级教程（四）
前端css基础学习笔记
a_big_panda的博客
01-22 921
例如： 效果：例如：效果：例如：效果：选择页面中对应的标签（找她），方便后续设置样式（改她）例如：效果：例如：效果：注意：一个id选中多个标签也有效果，但不符合规范，规范是一个id选择器只选中一个标签例如：效果：例如：效果：例如：效果：注意点：例如：效果：例如：效果：注意：注意：例如：效果：例如：效果：注意：例如：效果：例如：效果：注意：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置例如：效果：注意：开发中会使用text-decoration：none；清除a标签默认的下
【CSS学习笔记】
weixin_45037690的博客
08-12 771
Cascading Style Sheet 层叠样式表CSS：表现（美化网页）字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动CSS1.0CSS2.0：DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEOCSS2.1：浮动，定位CSS3.0：圆角、阴影、动画…浏览器兼容性。
h5+css学习笔记
m0_62410752的博客
03-15 396
个人学习笔记，自己看的
黑马程序员pink老师_CSS学习笔记
热门推荐
weixin_46764819的博客
03-07 1万+
CSS参考手册网址 一、CSS字体样式属性 font-size：字号 相对长度单位 说明 em 相当于当前对象内文本的字体尺寸 px 像素【最常用，推荐使用】 绝对长度单位 说明 in 英寸 cm 厘米 mm 毫米 pt 点 font-family：字体样式 p { 　　font-family: "宋体"；／＊可以写多个字体，用英文逗号隔开，表示找不到１字体去找２字体，.
HTML+CSS学习笔记.zip
01-01
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
html和css学习笔记
03-16
### HTML与CSS学习笔记 #### 一、基础知识概述 HTML（HyperText Markup Language）与CSS（Cascading Style Sheets）是构建网页的基础技术。通过学习HTML与CSS，我们可以创建结构化且美观的网页。 - **WWW (World ...
前端三件套css学习笔记分享
02-24
前端三件套css学习笔记分享
CSS学习笔记（手写版）
最新发布
07-26
这份手写版的CSS学习笔记涵盖了CSS基础到进阶的核心内容。内容包括CSS选择器、盒模型、布局技术（如Flexbox和Grid）、响应式设计、动画效果、以及常见的CSS框架和工具介绍。每个主题都有清晰的示例和实用的技巧，...
CSS学习笔记～～～～
05-17
在`CSS学习笔记-01.md`、`CSS学习笔记-02.md`和`CSS学习笔记-03.md`中，可能会深入讲解这些概念，包括更多选择器用法、布局技巧、CSS3特效和预处理器的使用，帮助读者逐步掌握这个强大的样式语言。
HeadFirst HTML&CSS学习笔记.zip
12-29
CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 Head...
CSS学习笔记：从入门到精通
"这是一份关于CSS学习的文档，作者参考了狂神的课程，旨在深化前端技术理解，特别是为了更好地学习Vue.js。文档详细介绍了CSS的基础知识，包括CSS的概念、发展历史、快速入门方法、选择器、网页美化、盒子模型以及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值