CSS-学习笔记

CYSDLN

已于 2022-07-15 09:47:12 修改

阅读量141

点赞数

分类专栏：学习笔记文章标签：前端 html css 学习

于 2022-07-15 08:59:27 首次发布

本文链接：https://blog.csdn.net/CYSNLD/article/details/125796640

版权

学习笔记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

表格四部分 table>tbody>tr>td

display: inline-block; /行内块级元素会排列在同一行

border-radius: 10px; /圆角/

line-height: 30px; /内容垂直居中/

vertical-align: top; /* 顶部对其方式 */

display: none; /一般用于不占空间的隐藏元素/

box-sizing: border-box; /全部设置成自己设定的宽度/

设置图片属性

ilter: blur(5px); 高斯模糊
brightness(%); 图片；图片亮度
filter: contrast(200%); 调整图像的对比度:
filter: drop-shadow(8px 8px 10px red); 阴影效果
filter: grayscale(50%); 将图像转换为灰度图像
filter: hue-rotate(90deg); 给图像应用色相旋转
filter: invert(100%); 反转输入图像:
filter: opacity(30%); 图像的透明程度:
filter: saturate(800%); 图像饱和度:
filter: sepia(100%); 将图像转换为深褐色:
filter: contrast(200%) brightness(150%);使用多个滤镜，每个滤镜使用空格分隔。注意: 顺序是非常重要的 (例如使用 grayscale() 后再使用 sepia()将产生一个完整的灰度图片)。

超链接样式

a:link{color: red;} 代表当一段文本为链接时的属性
a:visited{color: blue;} 代表这段文本被点击之后的属性。
a:hover{color: green;} 代表鼠标指针放在这个链接上时的属性
a:active{color: purple;} 代表鼠标按下时一瞬间的属性

设置网页背景

background-color 指定要使用的背景颜色
background-position 指定背景图像的位置
background-size 指定背景图片的大小
background-repeat 指定如何重复背景图像
background-origin 指定背景图像的定位区域
background-clip 指定背景图像的绘画区域
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
background-image 指定要使用的一个或多个背景图像

基础选择器

    <!-- 基础选择器
        #id     群组选择器
        .class  标签名选择器
        tag 类名选择器
        #id, tag, .class
        层次选择器
        p c 所有子代 {所有代}  
        p>c 第一代  
        s+s 给效果的是后面的第一个
        s~s 效果给后面的所有
        属性过滤器 [input 选择器]
        input[]            包含指定属性
        input[属性=值]      属性=值 <<<经常使用>>>
        input[属性*=值]     属性包含开头
        input[属性^=值]     属性以值开头
        input[属性$=值]     属性以值结尾
        
        伪类：(:)
        p:nth-child
        p:first-child
        p:last-child

        p:last-child    这个是给p标签   这里意思不一样
        p *:last-child  这个有空格 是给p的下一阶段
    -->

    <!-- <a href="#">超链接</a> -->
    <h2>一二三</h2> <!--标签名选择器-->
    <h3 id="asd">四五六</h3>  <!--群组选择器-->
    <h4 class="zxc">七八九</h4>   <!--选择器类名-->
{ /* width:calc(30% - 2px); = 布局的上下左右和整个布局的两边各减1px*/

子元素绝对定位父元素相对定位

position: relative; /相对定位/

position: absolute; 绝对定位

浮动

loat: left; /清除浮动/

float:left 文本或图像会移至父元素中的左侧。

float:right 文本或图像会移至父元素中的右侧。

float:none 默认。文本或图像会显示于它在文档中出现的位置

计数器(附代码,效果图)

<!DOCTYPE html>
<html lang="zh">
<head>
    <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>计数器</title>
    <style>
        .body{
            counter-reset:num; /*创建一个计数器 */
        }
        p::before{  
            content: counter(num)"."; /*计数器拼接*/
        }
        p{
            counter-increment: num 1; /*设置一个自增*/
        }
            </style>
</head>
<body>
    <p>这是一个段落标签</p>
    <p>这是一个段落标签</p>
    <p>这是一个段落标签</p>
    <p>这是一个段落标签</p>	
    <p>这是一个段落标签</p>
    <p>这是一个段落标签</p>
    <p>这是一个段落标签</p>
</body>
</html>

(效果图)