首页 > 其他分享 >CSS随笔

CSS随笔

时间：2023-08-13 21:33:29浏览次数：40  
标签：cadetblue 元素 样式表 background 随笔 选择器 CSS

1、什么是CSS

  1. CSS是什么

  2. CSS怎么用

  3. CSS选择器

  4. 美化网页

  5. 盒子模型

  6. 浮动

  7. 定位

  8. 网页动画

     

1.1、什么是CSS

层叠样式表

1.2、发展史

CSS1.0

CSS2.0 Div(块) CSS HTML与CSS结构分离的思想，网页变得简单，SEO

CSS2.1 浮动定位

CSS3.0 圆角，阴影，动画...浏览器兼容性~

1.3、CSS快速入门

style标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <!--<style标签中可以编写css的代码>每一个声明最好使用分号结尾
  语法：
  选择器{
     声明1；
     声明2；
     声明3；
     ...
  }
  -->
  <style>
    h1{
      color: cadetblue;
    }
  </style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <!--
用link链接
  -->
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
h1{
    color: cadetblue;
}

CSS的优势

1.内容和表现分离

2、可以复用

3.样式较丰富

4、建议使用独立于html的css文件

5、利用SEO，容易被搜索引擎收录

Vue不容易收录

1.4、CSS的3种导入方式

行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    内部样式表-->
    <style>
        h1{
            color: cadetblue;
        }
    </style>
    <!--    外部样式表-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--行内样式-->
<h1 style="color: cadetblue">我是标题</h1>
</body>
</html>

优先级

覆盖原则，最近的覆盖最远的

拓展：外部样式两种写法

  • 连接式

  • 导入式

    CSS@

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
      <style>
        @import "style.css";
      </style>
    </head>
    <body>
    <h1>你好</h1>
    </body>
    </html>

    弊端：网页比较大时，先展示结构再渲染

    link不同

区别：@import是CSS2.1特有的

2、选择器

作用：选择页面上的某一个元素或某一类元素

2.1、基本选择器

  1. 类选择器

    .选择class名{ 声明1； 声明2； 声明3； ... }

    可以多个标签归类，多个标签可以有同一个class名，并且可以使用在不同类的标签

  2. 标签选择器

    标签选择器会选择全部的该标签

    选择标签名{ 声明1； 声明2； 声明3； ... }

  3. id选择器

    #选择id名{ 声明1； 声明2； 声明3； ... }

    只可以使用在一个标签上，必须全局唯一

    js尽量操作id，class尽量操作css！

    id的优先级高于class的，大于标签级。

2.2、层次选择器

1、后代选择器：在某个元素的后面，后代都出现结果，可以有多个

body p{
      background: cadetblue;
    }

2、子选择器：只有一代出现结果，可以有多个

body > p{
      background: cadetblue;
    }

3、相邻兄弟选择器：同代相邻并且下一个出现结果，只有一个或零个

.active + p{
      background: cadetblue;
    }

4、通用兄弟选择器：同代并且下面所用出现结果，可以有多个

    .active~p{
      background: cadetblue;
    }

层次选择器不改变自身样式

2.3、结构伪类选择器

    ul li:first-child{
      background: cadetblue;
    }
    ul li:last-child{
      background: cadetblue;
    }

避免使用id和class选择器

    p:nth-child(1){
      background: cadetblue;
    }
/*选择当前元素的父级元素的第n个元素，且第n个元素是该元素*/
    p:nth-child(n){
      background: cadetblue;
    }
/*选择当前元素的父级元素的第n个元素*/
    p:nth-of-type(n){
      background: cadetblue;
    }
    /*鼠标移到上面出现的结果*/
    a:hover{
      background: cadetblue;
    }

2.4、属性选择器（常用）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .demo a{
      float: left;
      display: block;
      height: 50px;
      width: 50px;
      border-radius: 10px;
      background: cadetblue;
      text-align: center;
      color: gray;
      text-decoration: none;
      margin-right: 5px;
      font: bold 20px/50px Arial;
    }
    /*存在id的元素
    a[属性名 = 属性值（可用正则表达式）]{}
    */
    a[id=first]:hover{
      background: yellow;
    }
/*    a[class*="links"]{
      background: yellow;
    }*/
    /*href以http开头的变为黄色*/
/*    a[href^=http]{
      background: yellow;
    }*/
    a[href$=pdf]{
      background: yellow;
    }
  </style>
</head>
<body>
<p class="demo">
  <a href="http://www.baidu.com" class="links item first" id="first">1</a>
  <a href="" class="links item active" target="_blank" title="test">2</a>
  <a href="images/123.html" class="links item">3</a>
  <a href="images/123png" class="links item">4</a>
  <a href="images/123.jpg" class="links item">5</a>
  <a href="abc" class="links item">6</a>
  <a href="/abc.pdf" class="links item">7</a>
  <a href="/a.pdf" class="links item">8</a>
  <a href="abc.doc" class="links item">9</a>
  <a href="abcd.doc" class="class="links item last">10</a>
</p>
</body>
</html>

3.美化网页元素

3.1、为什么要美化网页

1、有效传递信息

2、美化网页，吸引用户

3、凸显主题

4、提高用户体验

span标签用于凸显想要凸显的字

3.2、字体样式

CSS 字体 - CSS：层叠样式表 | MDN (mozilla.org)

3.3、文本样式

基本文本和字体样式 - 学习 Web 开发 | MDN (mozilla.org)

3.4、超链接伪类

(67条消息) CSS——超链接的伪类超链接伪类花里梦雨的博客-CSDN博客

3.5、阴影

box-shadow - CSS：层叠样式表 | MDN (mozilla.org)

3.6、列表

#nav{
    width: 300px;
    background: gray;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: red;
}
/*ul{
    background: gray;
}*/
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;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
  <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
  <h2 class="title">全部商品分类</h2>

  <ul>
    <li>
      <a href="#">图书</a>
      <a href="#">音像</a>
      <a href="#">数字商品</a>
    </li>
    <li>
      <a href="#">家用电器</a>
      <a href="#">手机</a>
      <a href="#">数码</a>
    </li>
    <li>
      <a href="#">电脑</a>
      <a href="#">办公</a>
    </li>
    <li>
      <a href="#">家居</a>
      <a href="#">家装</a>
      <a href="#">厨具</a>
    </li>
    <li>
      <a href="#">服饰鞋帽</a>
      <a href="#">个性化妆</a>
    </li>
    <li>
      <a href="#">礼品箱包</a>
      <a href="#">钟表</a>
      <a href="#">珠宝</a>
    </li>
    <li>
      <a href="#">食品饮料</a>
      <a href="#">保健食品</a>
    </li>
    <li>
      <a href="#">彩票</a>
      <a href="#">旅行</a>
      <a href="#">充值</a>
      <a href="#">票务</a>
    </li>
  </ul>
</div>
</body>
</html>

3.7、背景

background - CSS：层叠样式表 | MDN (mozilla.org)

3.8、渐变

使用 CSS 渐变 - CSS：层叠样式表 | MDN (mozilla.org)

4、盒子模型

4.1、什么是盒子模型

盒模型 - 学习 Web 开发 | MDN (mozilla.org)

4.2、边框

border - CSS：层叠样式表 | MDN (mozilla.org)

4.3、内外边距

margin - CSS：层叠样式表 | MDN (mozilla.org)

4.4、圆角边框

CSS 圆角边框 (w3school.com.cn)

4.5、盒子阴影

(67条消息) CSS —— 盒子阴影（box-shadow）_ZhaoYLi的博客-CSDN博客

5、浮动

5.1、标准文档流

块级元素：独占一行

h1~h6 p div 列表

行内元素

span a img strong

行内元素可以被包含在块级元素中，反之则不行

5.2、float

float - CSS：层叠样式表 | MDN (mozilla.org)

5.3、display

display的值：

  1. block块元素

  2. inline行内元素

  3. inline-block 是块元素，但是可以内连，在一行

  4. none消失

5.4、overflow及父级边框塌陷问题

(67条消息) overflow及父级边框塌陷问题4种解决方案使用overfolw塌陷kalimera的博客-CSDN博客

增加父级元素的高度，最简单最low的方法，不推荐

 /* 最外层容器设置边框
    增加父级元素高度 */
        #father{
            border: black solid 1px;
            height: 600px;
        }

father下增加空div，简单，但代码中需尽量避免空div <body>

<div id="father">
    <div class="layer01"><img src="img/1.jpg" alt=""></div>
    <div class="layer02"><img src="img/2.jpg" alt=""></div>
    <div class="layer03"><img src="img/3.jpg" alt=""></div>
    <div class="layer04">浮动的盒子可以向左右浮动，直到其外边缘碰到包含框or另一个浮动盒子时</div>
    <div class="clear"></div>
</div>
</body>
    .clear{
            clear: both;
            margin: 0;
            padding: 0;
        }

在父级元素中增加overflow:hidden，此时父级元素并没有赋高度，其高度是由内部元素撑起来的，所以其内容并不会真的被修剪隐藏（overflow:auto会出现滚动条，类似overflow:scroll），但一些下拉场景中避免使用

  /* 最外层容器设置边框 */
        #father{
            border: black solid 1px;
            overflow: hidden;
            /* height: 600px; */
        }
推荐方案：在父类添加一个伪类:after，效果相当于在代码中新增空div，但是写在css中，没有副作用
   /*

推荐方案：在父类添加一个伪类:after，效果相当于在代码中新增空div，但是写在css中，没有副作用

 /* 伪类 */
        #father::after{
            content: '';
            display: block;
            clear: both;

}

6、定位

6.1、相对定位和绝对定位

CSS position 相对定位和绝对定位 | 菜鸟教程 (runoob.com)

6.2、固定定位

(67条消息) CSS学习21：fixed（固定定位）玉安ZhangDe的博客-CSDN博客

6.3、z-index

z-index - CSS：层叠样式表 | MDN (mozilla.org)

7、动画

使用 CSS 动画 - CSS：层叠样式表 | MDN (mozilla.org)

标签：cadetblue,元素,样式表,background,随笔,选择器,CSS
From： https://www.cnblogs.com/qylqf/p/17627313.html

相关文章

  • HTML&CSS基本知识
    HTML&CSS基本知识一、HTML基本介绍W3C标准（成立于1994年，web技术领域最权威和具影响力的国际中立性技术标准机构）worldWidewebConsortium(万维网联盟)W3c标准包括：结构化标准语言（HTML、XML）表现标准语言（CSS）行为标准（DOM，ECMAScript）HTML：超文本标签语言h5并不是新语言，而是html......
  • [算法考研笔记]mm算法随笔[成绩划分][回溯0-1][得分][字段和][聪明小偷][股票买卖]
    mm算法随笔学习笔记（回溯算法）回溯<---->递归1.递归的下面就是回溯的过程回溯法是一个纯暴力的搜索、有的时候暴力求解都没有办法，用回溯可以解决。回溯法解决的问题：组合问题如：1234两两组合切割问题如：一个字符串有多少个切割方式，或者切割出来是回文子集问题：1......
  • CSS超出溢出显示省略号
    作用：为了避免文本文字内容超出一定宽度后溢出，我们想要溢出的部分不显示但用省略号（...）显示使用：overflow与text-overflow顺序不能改换强制不换行：white-space:nowrap将行无素换成块元素[单独占一行]：dispaly:block.acli{  display:block;  float:left;  width:10%;......
  • C C++ Java python HTML/CSS/JavaScript
    C/C++是一种底层的语言，它可以直接操作内存和硬件，运行速度很快，但是也很难学习和调试，容易出错。Java是一种面向对象的语言，它可以跨平台运行，有很多成熟的框架和库，适合做大型的企业级应用，但是也很繁琐和冗长，需要写很多代码。Python是一种高级的语言，它可以用简洁的语法来实现复杂的功能......
  • 随笔-C-指针数组使用简记
    typedefstructmem_list*cns_detail_encode_result[encode_type_max];(gdb)p&((structmem_list**)0x7fffb4557950)[0]#&取对应点的位置$29=(structmem_list**)0x7fffb4557950(gdb)p((structmem_list**)0x7fffb4557950)+0$30=(structmem_list**)......
  • css块级标签、行内标签、行内块标签的特点和相互转换
    块级元素常见的块级元素h1-h6、div、p、ul、ol、li等，div最常用！块级标签的特点独占一行高度、宽度、内外边距都可以设置（重要）宽度默认是容器（父级标签）的100%是一个容器盒子，里面可以放其他行内或者块级元素注意点：1.文字类的元素内，不能在放块级元素，比如p标签、h1-h6......
  • emmet快速生成html标签和css样式
    emmet快速生成html标签语法1.生成标签，直接输入标签名，按下tab键即可；2.生成多个相同标签，加上即可，如生成3个div标签，div3；3.生成父子级的标签，使用>号，如ul>li;4.生成兄弟标签，使用+号，如div+p;5.生成带有类名或者id名的标签，直接写.demo或者#id按下tab键即可；6.如果生成的div类名是......
  • 【随笔】滇行散记
    滇行散记盛夏，至云南寻一避暑之地。早就听到传闻，说玉龙雪山“一山分四季，十里不同天”的景致。眼前之景，千变万化，远比传闻壮观。高山草原，荒无人烟，平地拔起延绵险峻的雪山，一堵极厚的云墙横在山中间，十三峰皆隐形。我和友人顺着索道上山。山脚碧树红花。悬着几片小云彩，不......
  • CSS基础：学习CSS样式的基本语法和应用，了解如何美化网页。
    CSS（层叠样式表）是一种用于描述网页上元素（例如文字、图像、背景等）外观和布局的样式语言。通过使用CSS，您可以控制和改变网页的外观，使其更具吸引力和易于使用。下面是一些CSS基础知识和常用的语法：选择器：CSS中的选择器用于选择要应用样式的HTML元素。最常见的选择器是元素选择器（例如......
  • CSS中clear:both清除元素的浮动
    作用是清除元素的浮动，当一个元素的浮动属性被设置为clear:both时，它将不再受到其他元素的影响，而是被放置在文档流的最下方clear:both的运用场景clear:both的运用场景主要有以下几种：1、当两个块级元素并排放置时，可以使用clear:both来清除浮动，以使得两个元素不会互相影响。2、当一个块......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99