zoukankan      html  css  js  c++  java

  • CSS详解

    一、CSS介绍

    • CSS是指层叠样式表 cascading style sheets
    • 通过CSS可以让我们定义HTML元素如何显示。
    • CSS可以让我们原本HTML不能描述的效果，通过CSS描述出来。
    • 通过CSS描述我们的html页面，可以让我们的页面更加漂亮，可以提高工作效率。

    二、CSS与HTML结合方式

    1、第一种方式 内联/行内样式

    就是在我们的HTML标签上通过style属性来引用CSS代码。
    优点:简单方便 ；
    缺点:只能对一个标签进行修饰。

    image-20210801201429656

    2、第二种方式 内部样式表

    我们通过< style>标签来声明我们的CSS. 通常< style>标签我们推荐写在head和body之间，也就是“脖子”的位置
    优点:可以通过多个标签进行统一的样式设置
    缺点: 它只能在本页面上进行修饰
    语法： 选择器 {属性:值;属性:值}

    image-20210801202042369

    3、第三种方式 外部样式表

    我们需要单独定义一个CSS文件,注意CSS文件的后缀名就是.css
    在项目根目录下，创建css目录，在css目录中创建css文件css01.css
    在< head>中使用< link>标签引用外部的css文件

    还可以使用另一种引入css文件的方式：

     <style>
  @import 'css/css01.css'
  </style>

    image-20210801203100841

    关于外部导入css使用< link>与@import的区别?

    • 加载顺序不同
      • @import方式导入会先加载html，然后才导入css样式，那么如果网络条件不好，就会先看到没有修饰的页面，然后才看到修饰后的页面。
      • 如果使用link方式，它会先加载样式表，也就是说，我们看到的直接就是修饰的页面；
    • @import方式导入css样式，它是不支持javascript的动态修改的。而link支持。
    • 三种样式表的优先级：满足就近原则
      • 内联 > 内部 > 外部

    三、CSS的使用

    1、CSS中选择器

    1.元素（标签）选择器

    它可以对页面上相同的标签进行统一的设置，它描述的就是标签的名称.

    image-20210801203451396

    2.类选择器

    类选择器在使用时使用"."来描述，它描述的是元素上的class属性值

    image-20210801203606102

    3.id选择器

    它只能选择一个元素，使用 "#" 引入，引用的是元素的id属性值。
    id选择器，比类选择器更具有唯一性

    image-20210801203721708

    4.选择器组

    逗号表示，谁和谁。
    例如，我有手机，你有手机，他也有手机，一条一条写太麻烦，就可以合并编写

    我,你,他{
    手机
}

    image-20210801204302940

    5.派生选择器

    • 子代：父子关系（隔代不管）
    • 后代：父子孙，曾孙，从孙...
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<style>

    /* div p：后代选择器，div下的所有p标签都会被选中，忽略层级 */
    /* div>p：子代选择器，div的子级元素p被选取，只选取一级 */
    div>p{
        color:red;
    }
</style>

<body>
    <!-- div有三个孩子：p、p、span
    span有两个孩子：p、p -->
    <div>
        <p>数学</p>
        <p>语文</p>
        <span>
            <p>古诗词</p>
            <p>文言文</p>
        </span>
    </div>

</body>

</html>

    image-20210801205227613

    6.CSS伪类

    • CSS伪类可对css的选择器添加一些特殊效果

    • 伪类属性列表：

      • :active 向被激活的元素添加样式。
      • :hover 当鼠标悬浮在元素上方时，向元素添加样式。
      • :link 向未被访问的链接添加样式。
      • :visited 向已被访问的链接添加样式。
      • :first-child 向元素的第一个子元素添加样式。

      超链接的伪类：要遵守使用顺序，爱恨原则 LoVeHAte，lvha

    a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */

    image-20210801223241917

    2、CSS基本属性

    1.文本属性

    • 指定字体：font-family : value;
    • 字体大小：font-size : value;
      • px：像素
      • em：倍数
    • 字体加粗：font-weight : normal/bold;
    • 文本颜色：color : value;
    • 文本排列：text-align : left/right/center;
    • 文字修饰：text-decoration : none/underline;
    • 行高：line-height : value;
    • 首行文本缩进：text-indent : value （2em）;

    image-20210801223400243

    2.背景属性

    CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。

    • background-color 设置元素的背景颜色。
    • background-image 把图像设置为背景。
    background-image: url('img/1.jpg');
    • background-repeat 设置背景图像的墙纸效果，是否及如何重复
      • repeat：在垂直方向和水平方向重复，为重复值
      • repeat-x：仅在水平方向重复
      • repeat-y：仅在垂直方向重复
      • no-repeat：仅显示一次
    • background-position 设置背景图像的起始位置
    • 1：控制水平方向 x轴： 正值，向右移动； 负值，向左移动
    • 2：控制垂直方向 y轴： 正值，向下移动； 负值，向上移动
    /* 图片向左移动50px，向下移动100px （可以为负值） */
background-position:50px 100px;
    • background-attachment 背景图像是否固定或者随着页面的其余部分滚动
      • 默认值是 scroll：默认情况下，背景会随文档滚动
      • 可取值为 fixed：背景图像固定，并不会随着页面的其余部分滚动，常用于实现称为水印的图像
    background-attachment: fixed;

    image-20210801223500220

    3.列表属性

    CSS列表属性作用如下：

    • 设置不同的列表项标记为有序列表
    • 设置不同的列表项标记为无序列表
    • 设置列表项标记为图像

    有两种类型的列表：

    • 无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）
    • 有序列表 - 列表项的标记有数字或字母

    使用CSS，可以列出进一步的样式，并可用图像作列表项标记。

    • none：无标记。（去除标记）
    • disc：默认。标记是实心圆。
    • circle：标记是空心圆。
    • square：标记是实心方块。
    • decimal：标记是数字。
    • decimal-leading-zero：0开头的数字标记。(01, 02, 03, 等。)
    • lower-roman：小写罗马数字(i, ii, iii, iv, v, 等。)
    • upper-roman：大写罗马数字(I, II, III, IV, V, 等。)
    • lower-alpha：小写英文字母The marker is lower-alpha (a, b, c, d, e,等。)
    • upper-alpha：大写英文字母The marker is upper-alpha (A, B, C, D, E,等。)

    image-20210801223702214

    网页导航效果的实现：

    image-20210802102432508

    4.边框属性

    CSS边框属性允许你指定一个元素边框的样式和颜色。

    image-20210802150454010

    border-style取值：

    image-20210802103409827

    5.轮廓属性

    轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

    轮廓和边框的区别：

    • 边框 (border) 可以是围绕元素内容和内边距的一条或多条线；
    • 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

    CSS outline 属性规定元素轮廓的样式、颜色和宽度。

    image-20210802151007677

    6.盒子模型

    所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

    CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

    盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。

    下面的图片说明了盒子模型(Box Model)：

    image-20210801163730130

    • margin(外边距) - 盒子与盒子之间的距离
    • border(边框) - 盒子的保护壳
    • padding(内边距/填充) - 内填充，盒子边与内容之间的距离
    • content(内容) - 盒子的内容，显示的文本或图像

    image-20210802152048111

    3、CSS定位

    1.默认定位

    • 块级元素：h1~h6，p, div 等，自上而下，垂直排列（自动换行）；可以改变宽高

      image-20210802152613207

    • 行内元素：a,b,span,等，从左向右，水平排列（不会换行）；不能改变宽高

      image-20210802152634523

    • 行内块元素：input,img等，从左向右，水平排列（自动换行）；可以改变宽高

      image-20210802152647623

    image-20210802153501183

    2.浮动定位

    • 让元素“飞”起来。不仅可以靠着左边或右边。还可以消除“块级”的霸道特性（独自占一行）。
    • float取值：
      • none ：不浮动
      • left：贴着左边 浮动
      • right：贴着右边 浮动

    image-20210802154146128

    3.相对定位

    和原来的位置进行比较，进行移动定位（偏移）

    image-20210802155012912

    4.绝对定位

    本元素与已定位的祖先元素的距离

    • 如果父级元素定位了，就以父级为参照物；

    • 如果父级没定位，找爷爷级，爷爷定位了，以爷爷为参照物。

    • 如果爷爷没定位，继续向上找，都没定位的话，body是最终选择。

    • 以父节点作为参照物

    • 以爷爷节点作为参照物

    image-20210802160102604

    5.固定定位

    将元素的内容固定在页面的某个位置，当用户向下滚动页面时元素框并不随着移动

    image-20210802160612586

    6.z-index

    如果有重叠元素，使用z轴属性，定义上下层次。

    注意：

    • z轴属性，要配合相对或绝对定位来使用。
    • z值没有额定数值（整型就可以，具体用数字几，悉听尊便）

    image-20210802161131435

    image-20210802161029510

    四、CSS3

    1、圆角

    border-radius：左上 右上 右下 左下;
    border-radius：四个角;
    border-radius：50%; 圆形

    image-20210801164137907

    image-20210802161554065

    image-20210802161418445

    2、盒子阴影

    box-shadow：1 2 3 4 5;
    1：水平偏移
    2：垂直偏移
    3：模糊半径
    4：扩张半径
    5：颜色

    image-20210802162510367

    3、渐变

    1.线性渐变

    background:linear-gradient([方向/角度]，颜色列表)；

    <style>
    div{
        200px;
       height: 60px; 
         margin: 10px;
    }
    .a1 {
        background: linear-gradient(red,black);
    }
    .a2 {
        background: linear-gradient(red,black,pink, green);
    }
    .a3 {
        background: linear-gradient(to left,red,black);
    }
    .a4 {
        background: linear-gradient(to top left,red,black);
    }
    .a5 {
        background: linear-gradient(30deg,red,black);
    }
</style>
<body>
    <div class="a1"></div>
    <div class="a2"></div>
    <div class="a3"></div>
    <div class="a4"></div>
    <div class="a5"></div>
</body>

    2.径向渐变

    以圆心向外发散

    background: radial-gradient(颜色列表);

    <style>
    div {
       200px;
      height: 200px;
      margin: 10px;
    }
    .a1 {
      background: radial-gradient(red, black);
    }
    .a2 {
      background: radial-gradient(red, black, pink, green);
    }
    .a3 {
      border-radius: 50%;
      background: radial-gradient(red, black);
    }
</style>
<body>
    <div class="a1"></div>
    <div class="a2"></div>
    <div class="a3"></div>
</body>

    image-20210802162858734

    4、背景

    1.背景位置

    background-origin：指定了背景图像的位置区域

    • border-box : 背景贴边框的边
    • padding-box : 背景贴内边框的边
    • content-box : 背景贴内容的边
    <style>
    div {
      background: url("img/1.jpg") no-repeat;
       200px;
      height: 80px;
      margin: 20px;
      border: 10px dashed black;
      padding: 20px;
    }
    .a {
      background-origin: border-box;
    }
    .b {
      background-origin: padding-box;
    }
    .c {
      background-origin: content-box;
    }
</style>
<body>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</body>

    image-20210802163219889

    2.背景裁切

    background-clip:

    • border-box 边框开切
    • padding-box 内边距开切
    • content-box 内容开切
    <style>
    div {
       200px;
      height: 80px;
        border: 10px dashed red;
      background-color: darkcyan;
      margin: 20px;
      padding: 20px;
    }
    .a {
      background-clip: border-box;
    }
    .b {
      background-clip: padding-box;
    }
    .c {
      background-clip: content-box;
    }
</style>
<body>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</body>

    image-20210802163408887

    3.背景大小

    background-size:

    • cover 缩放成完全覆盖背景区域最小大小
    • contain 缩放成完全适应背景区域最大大小
    <style>
    div {
      background: url("img/1.jpg") no-repeat;
       200px;
      height: 100px;
      border: 2px solid red;
      margin: 20px;
    }
    .a {
      background-size: cover; /* 完全覆盖 */
    }
    .b {
      background-size: contain;  /* 完全适应 */
    }
</style>
<body>
    <div class="a"></div>
    <div class="b"></div>
</body>

    image-20210802163629418

    5、过度动画

    1.过渡

    从一个状态到另一个状态，中间的“缓慢”过程；

    缺点是，控制不了中间某个时间点。

    transition｛1 2 3 4｝

    1：过渡或动画模拟的css属性

    2：完成过渡所使用的时间（2s内完成）

    3：过渡函数。。。

    image-20210801164710669

    4：过渡开始出现的延迟时间

    transition: width 2s ease 1s;

    目前，css3只开发出部分的过渡属性，下图所示：

    image-20210801164746226

    <style>
    div{
         100px;
         height: 50px;
        border: 2px solid red;
    }
    .a{
        transition: width 2s linear 1s;    /*1秒过后，div在2秒内匀速缓慢的变宽*/
    }
    div:hover{  300px;}    /*触发div变宽*/
</style>
<body>
    
    <div class="a">Hello,拉勾</div>
</body>

    image-20210802164816361

    2.动画

    从一个状态到另一个状态，过程中每个时间点都可以控制。

    • 关键帧：@keyframes 动画帧 { from{} to{} } 或者{ 0%{} 20%{}... }

    • 动画属性：animation{ 1 , 2 , 3 , 4 , 5 }

      1：动画帧
      2：执行时间
      3：过渡函数
      4：动画执行的延迟（可省略）
      5：动画执行的次数

    需求1：一个 元素从左向右移动，3秒内执行2次

    <style>
    div{
         700px;
        border: 1px solid red;
    }
    @keyframes x{
        from{ margin-left: 0px;}
        to{ margin-left: 550px;}
    }
    img{
        animation: x 3s linear 2;
    }
</style>
<body>
    <div>
        <img src="img/cat.gif">
    </div>
</body>

    image-20210802164949229

    需求2：一个 元素从左向右移动，3秒内执行完成。无限次交替执行
    infinite：无限次
    alternate：来回执行（交替，一去一回）

    <style>
.wai{
     600px;
    height: 100px;
    border: 2px solid red;
}
.nei{
     40px;
    height: 80px;
    margin: 5px;
    background: red;
}
.nei{
    animation: x 3s linear infinite alternate;
}
@keyframes x{
    0%{ margin-left: 0px; }
    25%{ background: yellowgreen; }
    50%{ background: goldenrod; }
    75%{ background: palevioletred;}
    100%{
        background: coral;
        margin-left: 550px;
    }
}
</style>

    image-20210802165233510

    本文来自博客园，作者：寒露凝珠，转载请注明原文链接：https://www.cnblogs.com/china-soldier/p/15090673.html
  • 相关阅读:
    多线程学习笔记第一篇
    当Visual Studio中win32控制台应用程序的注释也会生产代码时……
    博客行文及排版技法
    Debian Linux下的Python学习——安装python,vim
    onhashchange事件
    MyEclipse9 Maven开发Web工程 详细配置
    Java面向对象(上)
    lucene 的分析器(analyzer)与分词器(tokenizer)和过滤器(tokenfilter)
    java编程陷阱
    solr中文分词(mmseg4j)
  • 原文地址：https://www.cnblogs.com/china-soldier/p/15090673.html
Copyright © 2011-2022 走看看