CSS基础知识

御魂165

已于 2024-11-24 18:37:17 修改

阅读量1.6k

点赞数 41

文章标签： css 前端

于 2024-10-25 22:46:05 首次发布

本文链接：https://blog.youkuaiyun.com/qq_59533170/article/details/142820826

版权

CSS

浏览器对语言的兼容性检查
引入方式
属性
- 文本属性
- 字体属性
表格属性
背景属性
选择器
css盒子模型

浏览器对语言的兼容性检查

兼容性统计网
在这里插入图片描述

引入方式

内联（行内）样式

<p style="background: orange;font-size: 32px;">hahahahahhahahha</p>

在这里插入图片描述

内部样式

放在头部里面的style标签里

<head>
 <style>
        a {
            color: blueviolet;
            font-size: 30px;
            background-color: #eee;
            text-decoration-style: wavy;
        }

        table {
            border-collapse: collapse
        }
 </style>
</head>
<body>
    <a href="../文本标签/span.html" >进入文本标签哦</a>
    <a href="../文本标签/span.html" >进入文本标签哦</a>
</body>

在这里插入图片描述

外部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./public.css">
    </head>
<body>
    <a href="../文本标签/span.html">进入文本标签哦</a>
</body>

同级目录下创建public.css

a {
    font-size: 100px;
    background-color: black;
}

在这里插入图片描述

优先级

行内 > 外部和内部
外部和内部谁越靠近body谁优先级越高

属性

文本属性

text-align 水平文本对齐方式默认left，还有right，center
text-decoration 文本修饰主要用来消除链接下划线 text-decoration是text-decoration-line，text-decoration-color，text-decoration-style，text-decoration-thickness的缩写
线条默认是none，还有underline下划线，overline上划线，line-through删除线
颜色默认是最近颜色，可以用英文颜色，rgb(rgba)，十六进制颜色
样式默认solid(实线)，还有double(双条线)，dotted(点)，dashed(虚线)，wavy(波浪线)
粗细默认initital，auto，from-font(字体文件有首选的厚度值，则使用字体文件的厚度值)，长度值(px em)，百分比值

text-transform 文本大小写 captialize单词首字母大写 uppercase 全部大写 lowercase全部小写
text-indent 首行文本缩进负值(向后走) 正值(向前走)
在这里插入图片描述

<body>
    <em>em 白菜</em>
    <i>i 白菜</i>
    <b>b 白菜</b>
    <strong>strong 白菜</strong>
    <del>del 白菜</del>
    <span>span 白菜</span>
    <a href="../无序列表/ul.html">无序列表</a>
    <p>没错我就是一段用来</br>演示text-indent的文本</p>
</body>
<style>
    body {
        text-align: center;
        text-transform: capitalize;
    }

    a {
        text-decoration: underline red double from-font;
    }

    p {
        text-indent: 2em;
    }
</style>

字体属性

color 颜色英文颜色 16进制（#000黑 #eee 白）rgb{rgb(255,0,0)红 rgb(0,255.0)绿rgb(0,0,255)蓝 rgb(255,255,255) 白~rgb(0,0,0)黑 rgba(0,0,255,0.5)0.5半透明 0透明 1不透明}
font-size 字体大小 chrome浏览器最小字体12px
font-weight 文本粗细 lighter更细 bold粗体 bolder更粗 100-900(细到粗)400默认 700是bold
font-style 字体样式 normal默认正常 italic斜体
font-family 字体默认Microsoft YaHei
在这里插入图片描述

a {
    color: green;
    font-size: 50px;
    font-weight: blod;
    font-style: italic;
    background-color: black;
}

表格属性

border 以前的写法 border：1px solid red； css3的写法默认为0 没有边框 1 有边框
border-collaspe 折叠边框默认separate有边框 collaspe无边框
text-align 左中默认
vertical-align 垂直文本对齐 bottom居下对齐 top居上对齐 center居中对齐
padding 内边距边框与内容边距四个值时上面右边下边左边三个值时上左右下二个值时上下左右一个值时上下左右
margin 外边距边框与外面边距
在这里插入图片描述

<table>
        <tr>
            <td>hh</td>
            <td>aa</td>
            <td>dd</td>
        </tr>
        <tr>
            <td>dd</td>
            <td>hh</td>
            <td>aa</td>
        </tr>
        <tr>
            <td>aa</td>
            <td>dd</td>
            <td>hh</td>
        </tr>
    </table>
</body>
<style>
    table {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        text-align: center;
        vertical-align: middle;
        padding: 2px;
        /* 第一张图 不加border-collapse属性 第二张图加 第三张图 把td的样式注释*/
        border-collapse: collapse;
        margin: auto;
    }

    tr {
        border: 1px solid green;
    }

    /* td {
        border: 1px solid blue;
    } */
</style>

背景属性

background 是这五个属性 background-color background-image background-repeat background-attachment background-position 这五个属性不需要全部使用第四个最不常用
背景颜色
背景图片地址 url(" 图片地址")
背景水平或垂直平铺 默认水平平铺 (repeat-x)，还有repeat-y,不平铺no-repeat
背景是否固定 默认scroll 随页面滚动而滚动 fixed不会随之滚动 local背景图片随元素内容滚动 initial设置属性的默认值 inherit父元素继承
背景图像的起始位置 默认0 0 水平位置垂直位置

background-size 背景图片大小(两个值第一个宽度第二个高度) 值可px % cover(保持纵横比，完全充满空间) background-position：center center；显示的是图片中间位置 contain(保持纵横比，最长的边也进去空间，不会溢出空间)
在这里插入图片描述

<body>
    <div></div>
</body>
<style>
    div {
        width: 200px;
        height: 200px;
        background-color: blue;
        /* background-size:contain 第二张图的效果 */
        background-size: contain;
        /* background-size: cover; */
        background-position: center center;
        background-repeat: no-repeat;
        background-image: url("https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/50706fe64cbbdddc2c8c99d27eb64d4d.jpeg?x-oss-process=image%2fresize%2cm_lfit%2cw_3840%2ch_2160");
    }
</style>