html是什么 html（Hypertext Markup Language）—— 结构超文本标记标签 <> 标签对单标签在标签中间—— 标签名语言

css

凡是写在标签名后面的都是标签的属性
可以自动刷新浏览器
属性名称 = “属性值”

border

    <!--
        border
            边框的粗细（宽度）
            边框的样式  solid  dotted  dashed
            边框的颜色
                英文单词  red
                十六进制  #8c8c8c
                rgb() red green blue
    -->

border 区域会不会显示背景图(会显示)

    <style>
        .box{
            width:300px;
            height:200px;
            border:10px d #0c0c0c;
            background: url("img/14.jpg") repeat-y;
            margin:40px 30px 20px 10px;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>

border-color 边框颜色
border-style 边框样式
border-width 边框宽度

border-top
border-top-color
border-top-style
border-top-width
border-bottom-style: dashed;   dashed 虚线  dotted 点线

background 参数不受顺序影响

背景色 background-color
背景图 background-image

背景图平铺 background-repeat

1: repeat 平铺（默认值）；
2: no-repeat 不平铺
3: repeat-x 横向平铺
4： repeat-y 纵向平铺

背景图定位 background-position

背景图定位如果只给X轴的值(一个值) 那么Y轴会默认center

 第一个值 x轴 （num center left right）
    第二个值 y轴 （num center left right）

背景图是否滚动 background-attachment

    fixed  固定
                位置是以浏览器的可视区域来定位
                不会随着页面的滚动而改变自身的位置
    scroll 滚动
                位置是以容器来定位
                会随着页面的滚动而改变自身的位置

- 背景图背景色

background: #0b9380  url(img/email.png) no-repeat 0 0 fixed ;  颜色写在前面

font

文字复合样式

font: bold italic 50px '宋体';
    font:
            第一二个值（文字着重和文字样式）
            第三个值 font-size( 文字大小 )
            第四个值 font-family( 文字字体 )

font-weight
```
1: bold 加粗
2: normal (正常，不加粗) 默认值
3: 100 -700
4: border(比较级)
```
相对于父级更粗一点，并且只有两个状态，一个是正常（normal）一个是加粗 (bold)
文字大小 font-size
文字样式 font-style

italic(倾斜)
normal（正常）
font-family: ‘宋体’,’Arial’, “微软雅黑”,’microsoft yahei’;
文字颜色 color

文本对齐方式 text-align

: letf 左对齐
: right 右对齐
: center 居中对齐

首行缩进 text-indent

    <style>
        #box{
            border:1px solid #0b9380;
            width:400px;
            font-size:44px;
            text-indent: 2em;
        }
    </style>
    <body>
        <div id="box">
            邮件地址
        </div>
<!--
        px  像素
        em  相对单位
        text-indent
            文字缩进
-->
    </body>

text-decoration 文本修饰

<style>
    text-decoration:underline;
<style>
    <!--
        text-decoration    文本修饰
            underline      下划线
            line-through   中划线
            overline       上划线
    -->

文字间距

letter-spacing字母间距
word-spacing  单词间距（是以空格为解析单位）

强制不换行 white-space

white-space:
            nowrap  不换行
            normal  正常

padding

padding 内边距内填充
占位宽 border padding width margin

<!--
    padding:一个值
            四个方向

    padding:两个值
        第一个值  上下
        第二个值  左右

    padding:三个值
        第一个值  上
        第二个值  左右
        第三个值  下

    padding:四个值
        上，右，下，左
-->

margin

    1.两个相邻的同级别元素上下margin会叠压

    解决方案：  1: 给这个2个元素加 float
              2: 转换为行内块  display: inline-block

    2.margin的上下传递(父子级元素)

    解决方案：01：给父级加overflow:hidden 或者 加边框 border 或者给 子级加 position:absolute;

邮件

<a href="mailto:test@miaov.com">发邮件</a>
<a href="tel:01029837492">打电话</a>  // 手机端可用

锚点

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            height:30px;
            background: #0b9380;
            color: #fff;
            margin-bottom: 1000px;
        }
    </style>
</head>
<body>
    <a href="#box1" target="_blank"></a>
    <a href="#box2">box2</a>
    <a href="#box3">box3</a>
    <div class="box" id="box1">box1</div>
    <div class="box" id="box2">box2</div>
    <div class="box" id="box3">box3</div>
</body>

a标签target 属性；
    _blank  在新窗口中打开被链接文档。
    _self   在被点击时的同一框架中打开被链接文档（默认）。
    _parent 在父框架中打开被链接文档。
    _top    在窗口主体中打开被链接文档。

a 伪类；

a:link{ color: yellow; }

        link    未访问过
        hover   鼠标悬停
        active  鼠标按下
        visited 访问过后

常用标签

<header>页眉，主要用于页面的头部的信息介绍，也可用于板块头部</header>
<nav>导航 （包含链接的的一个列表）</nav>
<footer>页脚  页面的底部 或者 版块底部</footer>
<section> 页面上的版块 用于划分页面上的不同区域,或者划分文章里不同的节<section>
<article>用来在页面中表示一套结构完整且独立的内容部分</article>
<aside>侧边栏、广告</aside>
<time>用来表现时间或日期</time>

<h1>这个是h1标签</h1>
<h2>这个是h2标签</h2>
<h3>这个是h3标签</h3>
<h4>这个是h4标签</h4>
<h5>这个是h5标签</h5>
<h6>这个是h6标签</h6>
<div>这个是div标签</div>
<p>段落</p>
<strong>强调</strong>
<b>强调</b>
<em>强调</em>
<ul>
</ul>
<ol>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>
<dl>
    <dt>列表头</dt>
    <dd>列表项</dd>
    <dd>列表项</dd>
    <dd>列表项</dd>
    <dd>列表项</dd>
</dl>
<mark>h1标签在一个页面上最好只出现一次 并且，用在logo身上</mark>

选择器

群组选择器 .name，span，em
包含选择器 .name span em
通配符选中页面上所有的标签 *
id 选择器
class 选择器
选择器优先级 style > ID > class > 标签

css_reset 清除默认样式

 有默认margin的元素
       body,h1~h6,p,ul,ol,dl,dd
    有默认padding的元素
        ul,ol


    ul,ol身上都有默认的list-style
    在清除的时候，可以直接清除li身上的list-style
    但是要记住，默认的list-style是在谁身上产生的

块元素

    块元素的特征
        1,默认独占一行
        2,支持所有css样式
        3,没有宽度的时候，默认撑满父级的宽

行内元素

    内嵌(内联、行内)的特征
        1、同排可以继续跟同类的标签(一行可以显示多个同类型的标签)
        2、内容撑开宽度(所有的标签都是内容撑开高度)
        3、不支持宽高
        4、不支持上下的margin
        5、代码换行被解析(解析成空格 —— 一个空格的大小)

行内块

    内联块特性：
        1、让块在一行显示；
        2、让行内元素支持宽高；
        3、没有宽度的时候内容撑开宽度

来源：CSDN

作者：lpr_41976695

链接：https://blog.csdn.net/qq_35737105/article/details/79146247

标签

css框架

border虚线

padding

border

css

css样式

css 笔记整理

html是什么 html（Hypertext Markup Language）—— 结构 超文本 标记 标签 <> 标签对 单标签 在标签中间—— 标签名 语言

css

border

background 参数不受顺序影响

背景图是否滚动 background-attachment

font

padding

margin

邮件

标签

锚点

常用标签

选择器

css_reset 清除默认样式

块元素

行内元素

行内块

html是什么 html（Hypertext Markup Language）—— 结构超文本标记标签 <> 标签对单标签在标签中间—— 标签名语言