您的位置: 首页  >  文章  >  CSS笔记

CSS笔记

分类: 文章 • 2024-02-18 15:14:22

###常见的HTML标签
标题：h1、h2、h3、h4、h5…
段落：p
换行：br
容器：div、span（用来容纳其他标签）
表格：table、tr、td
列表：ul、ol、li
图片：img
表单：input
链接：a

CSS样式

CSS笔记

行内样式
<p style="border: 10px purple; color: firebrick;">段落标签</p>
页内样式
<title>CSS的页内样式</title>
    <style>
        div{
           background-color: green;
           font-size: 25px;
           color: white;
        }
   </style>
外部样式
<head>
    <meta charset="UTF-8">
    <title>CSS的外部样式</title>
    <link rel="stylesheet" href="css/index.css">
</head>

CSS选择器

CSS笔记

标签选择器
CSS笔记
类选择器
CSS笔记
id选择器
CSS笔记
并列选择器(标签和类或者id 或的关系)
CSS笔记

复合选择器(标签和类或者id 且的关系)
CSS笔记
后代选择器（标签和标签)
CSS笔记
直接后代选择器（标签和标签)
CSS笔记
相邻兄弟
CSS笔记
属性选择器
CSS笔记

CSS笔记

CSS笔记

CSS选择器 – 伪类（标签不同状态）
CSS笔记
CSS笔记

CSS笔记
CSS选择器的优先级别遵循:
1. 相同类型的选择器遵循: a.就近原则 b.叠加原则
2. 不同类型的选择器遵循:
important > 内联 > id > 类 | 伪类 | 属性选择 | 伪元素 > 标签 > 通配符 > 继承
3. 选择器的针对性越强，它的优先级就越高

<head>
    <meta charset="UTF-8">
    <title>CSS选择器的优先级别</title>
    <style>
        /*复合选择器*/
        div.test1{/* 权值:10+1 */
            color: orchid;
        }

        div#main{/* 权值:100+1 */
            color: springgreen;
        }

        /*id选择器*/
        #main{ /* 权值:100 */
            color: purple;
        }

        #second{
            color: yellow;
        }

        /*类选择器*/
        .test1{ /* 权值:10 */
            color: aqua;
        }

        .test2{ /* 权值:10 */
            color: blue;
        }

        /*标签选择器*/
        div{ /* 权值:1 */
            color: red !important;
        }

        /*
        通配符: 权值:0
           1.优先级别是最低的;
           2.性能是最差的.
        */
        *{ /* 权值:0 */
           font-size: 30px;
        }
    </style>
</head>
<body>
    <div id="main" class="test1 test2" style="color: burlywood;">我是一段文字</div>
</body>

HTML的标签类型

CSS笔记
HTML有N多标签，根据显示的类型，主要可以分为3大类
块级标签
独占一行的标签
能随时设置宽度和高度（比如div、p、h1、h2、ul、li）

行内标签（内联标签）
多个行内标签能同时显示在一行
宽度和高度取决于内容的尺寸（比如span、a、label）

行内-块级标签（内联-块级标签）
多个行内-块级标签可以显示在同一行
能随时设置宽度和高度（比如input、button）

display 修改标签类型

CSS中有个display属性，能修改标签的显示类型
none：隐藏标签
block：让标签变为块级标签
inline：让标签变为行内标签
inline-block：让标签变为行内-块级标签（内联-块级标签）

属性

/添加到文本的修饰/
text-decoration: line-through;
/首行缩进/
text-indent: 2%;
/处理超出的内容:hidden直接裁剪/
overflow: scroll;
/no-repeat:不平铺/
background: url(“images/bg.jpeg”) no-repeat;

/设置边框/ border: 2px solid black;
/设置内边距/padding:10px;
/设置外边距/ margin: 30px;

/块阴影/ box-shadow: 10px 10px 10px purple;
/文字阴影/text-shadow: 10px 10px 9px purple;
/设置圆角//border-radius: 20px;/
border-top-left-radius: 100px;
border-bottom-right-radius: 100px;
/设置不透明度/opacity: 0.1;

border: 5px solid #E6A43F;

float: left;

注意:任何标签只要一浮动,类型就会被转为行内-块级标签

position

/相对浏览器进行定位/
position: fixed

子绝父相

position: relative; (父) position: absolute;（子）

居中

水平居中:
适用于行内标签和行内-块级标签: text-align
适用于块级标签水平居中: margin:0 auto;

垂直居中:
适用于行内标签和行内-块级标签: line-height
适用于块级标签: position left top tanslate

相关推荐