【学习笔记】CSS3

CSS/设计
539
0
0
2022-12-01
CSS学习笔记：表格样式，图片样式【7/27】
上一篇
从头学前端-CSS基础03
下一篇
标签   CSS3

CSS3

说明 此笔记为本人学习遇见狂神说的教程学习笔记，侵删。

快速入门

html文件中

<!--    规范，<style> 可以编写css的代码，每个声明，最好使用分号结尾
    语法：(里面不能写html代码， 注释/**/)
        选择器{ 
            声明1;
            声明2;
            声明3;
        }

--> 
    <style>
        h1{
            color: red;
        }
    </style>

外部引用（建议）

单独写一个.css文件，用link引入

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

css的优势

  1. 内容和表现分离
  2. 网页结构表现统一，可以实现复用
  3. 样式十分丰富
  4. 建议使用独立于html的css文件
  5. 利用SEO，容易被搜索引擎收录！

css导入方式

h1{
    /*外部样式*/
    color: blue;
}
<head> 
    <style>
        h1{
            /*内部样式*/ 
            color: green;
        }
    </style> 
    <link rel="stylesheet" href="css/style.css">

</head>
<!--
行内样式：在标签元素内，编写一个style属性，编写样式
    优先级 行内>内部>外部 （错误！）
    就近原则，谁离得近就是谁，外部导入的位置 or 覆盖原则？
    行内多个  ;结尾
-->
<h1 sytle="color: red">标题</h1>

外部标签两种写法

链接式

<!--链接式-->
<link rel="stylesheet" href="css/style.css">

导入式 CSS 2.1 特有

先加载网页骨架在加载美化

<!--导入式--> 
    <style> 
        @import url("css/style.css");
    </style>

选择器

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

基本选择器

  1. 标签选择器
<style> 
    /*标签选择器，会选择页面上所有的这个标签的元素*/
    h1{
        color: #123456;
        background: #f98f;
        /*圆角*/ 
        border-radius: 20px;
    }
    p{
        font-size: 80px;
    }
</style>
  1. 类 选择器 class
<style> 
        /*类选择器的格式，  .class的名称{}
            可以多个标签归类,是同一个class，可以复用跨标签
        */
        .hhh{
            color: aqua;
        }
        .www{
            color: antiquewhite;
        }
    </style>
  1. id选择器
<style> 
    /* id选择器 id全局唯一！
    #id名称{}
    */
    #hhh{
        color: aqua;
    }
</style>

顺序： id > class > 标签

高级选择器

层次选择器 - 不包括自己

后代选择器：在某个元素的后面

body p{
    background: red;
}

子选择器

body>p{
    background: green;
}

相邻兄弟选择器

只有一个 相邻（向下）

.[class] + p{
    background: gold;
}

通用选择器

当前元素向下的所有兄弟元素

.[class]~p{
    background: yellow;
}

结构伪类选择器

<style> 
        /*选择ul的第一个子元素*/
        ul li:first-child{
            background: green;
        }
        /*选择ul的最后一个子元素*/
        ul li:last-child{
            background: gold;
        }
        /*选择p标签，定位到其父标签，选择当前的第(x)个元素，
          当该元素与设置的标签一致时，应用修改

          不分类型
          */
        p:nth-child(2){
            background: red;
        }
        /*选中父元素，下的第(x)个，类型

        分类型
        */
        p:nth-of-type(3){
            background: aqua;
        }
        /*经过*/
        a:hover{
            background: black;
        }
    </style>

属性选择器（常用）

<!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: blue;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        /*存在id属性的元素
            a[id]{}
            属性名，属性名+属性值（可正则）
            = 绝对等于
            *= 包含
            ^= 开头
            $= 结尾
        */
        a[class*="links"]{
            background: green;
        }
        a[id=first]{
            background: yellow;
        }
        /*选中href中以http开头*/
        a[href^=a]{
            background: red;
        }
    </style>

</head>
<body>

<p class="demo"> 
    <a href="https://livinfly.top" class="links item first" id="first">1</a> 
    <a href="" class="links item active" target="_blank" title="test">7</a> 
    <a href="a.jpg" class="links item">6</a> 
    <a href="2.png" class="links item">5</a> 
    <a href="abc" class="links item">4</a> 
    <a href="sss.doc" class="links item">3</a> 
    <a href="aaa.txt" class="links item last">2</a>
</p>

</body>
</html>

美化网页元素

span标签：重要的字放进去（约定俗称的东西） div也类似

字体样式

<!--
font-family 字体（可以同时一个中文一个英文……
font-size px  em 字体大小  em是字，px是像素
font-weight: bold lighter 可以直接改值 粗细
color 颜色

font: oblique bolder 16px "楷体";
-->

文本样式

  1. 颜色
  2. 文本缩进
  3. 缩进
  4. 行高
  5. 装饰
  6. 文本图片居中
<!--
color
    文字，#FFFFFF
    RGB，RGBA（透明度 0~1）
排版
    text-align: center; 居中
    text-indent: 2em; 首行缩进
background 背景色
height 背景高度
line-height 行高
想要文字上下居中，行高与背景高度一致

text-decoration: underline; 下划线
line-through; 中划线（删除线
overline; 上划

多标签选择器
img,span{
    vertical-align: middle; 竖直居中
}
-->

阴影

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

超链接伪类

a{
    text-decoration: none;
    color: black;
}
/*未访问*/
a:link{
    color: aqua;
}
/*悬停*/
a:hover{
    color: orange;
    font-size: 30px;
}
/*点击*/
a:active{
    color: green;
}
/*访问过*/
a:visited{
    color: pink;
}

列表样式

/*
list-style
none 去掉
circle 空心圆
decimal 数字
square 正方形

<div id="nav">
    xxxxx
</div>

*/

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

背景

  1. 背景颜色
  2. 背景图片
<style>
    div{
        width: 1000px;
        height: 700px;
        border: 1px solid red;
        background-image: url("xx.jpg");
        /*默认是全部平铺*/ 
        /*颜色 图片 图片位置 平铺方式*/ 
        background: red url("") 270px 10px no-repeat
           background-image: url("");
        background-repeat: ...;
        background-position: 122px 2px;
    }
/*
    background-repeat:repeat-x;
    只在第一行平铺
    repeat-y
    no-repeat
*/
</style>

渐变

Grabient

径向，圆形

background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

盒子模型

  1. margin：外边距
  2. padding：内边距
  3. border：边框

边框

border: 粗细 样式 颜色

body默认有默认的外边距

h1,ul,li,a,body{
    /*相当于初始化*/ 
    margin: 0;
    padding: 0;
    text-decoration: none;
}
div:nth-of-type(1) input{
    
}

外边距与div居中

居中（要求：块元素，有固定宽度！！img需要放在div中）

margin是顺时针，只有两个时，是上下和左右

margin: 0 auto

margin+border+padding+内容宽度

圆角边框

左上开始的顺时针方向

貌似就顺着填

div{
    width: 100px;
    height: 100px;
    border: 10px solid red;
    border-radius: 100px;
    /*半径，有时需要迁就长宽*/
}

阴影

div{
    box-shadow: 10px 10px 100px yellow
}

浮动

标准文档流

块级元素：独占一行

h1~h6 p div list...

行内元素：不独占一行

span a img strong...

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

<!--
display: [];
    block 块元素
    inline 行内元素
    inline-block 是块元素，但是可以内联，在一行
    none 消失

float: [];
    left, right 行内左右浮动
clear: both 不贴着上一个浮动
-->

父级标签塌陷问题

<!--
clear: [];
    right 右侧不允许有浮动元素
    left
    both
    none
-->

增加父级元素高度

增加一个空的div标签，清除浮动

<div class="clear"></div>

.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

overflow

在父级元素中增加一个 overflow: hidden;

父类添加一个伪类: after

#father:after{
    content: '';
    display: block;
    clear: both;
}

定位

border: dashed（虚线？）

相对定位

相对于自己原来的位置偏移

position: relative；

right: 20px;

....

绝对定位

仍然基于xx定位

position: absolution

  1. 没有父级元素定位的前提下，相对浏览器定位
  2. 父级元素存在定位，会相对于父级元素进行偏移
  3. 在父级元素范围内移动（好像可以出去？）

绝对的，不保留原来位置。

固定定位

position: fixed;

固定定位是固定在某个地方，浏览器向下移动页面也不动；

绝对定位是会动的。

z-index

（好像）定位，浮起来，才有层级的关系

0~n级图层，覆盖的问题

z-index: 10;

不透明度

​ opacity: 0.5;

​ filter: opacity(0.5);

后记

还有CSS预处理器：

  1. SASS
  2. LESS（功能简单，效率较低，但够用）
CSS学习笔记：表格样式，图片样式【7/27】
上一篇
从头学前端-CSS基础03
下一篇