HTML CSS

蓝宝唉

于 2024-02-20 20:19:16 发布

阅读量555

点赞数 17

文章标签： html css 前端

本文链接：https://blog.csdn.net/2301_80868036/article/details/136198020

版权

css

1.css的三种应用方式

(1).行内样式:使用style属性来设置样式，不推荐使用(项目维护非常麻烦)

一般和js一起使用

(2).内嵌式:可以通过style 标签来实现，style标签要放在head标签中

项目中不推荐使用，练习时可以用

(3).外部样式:通过外部的css文件实现，使用link标签引入

项目中推荐使用第三种

优先级：就近原则，谁离元素近，谁生效.

<style>
        /* 选择器｛属性；值｝*/
        p{
            color:yellow;
        }
    </style>
    <link rel="stylesheet" href="css/css.css">
    <p style="color: red;">

2.字体样式

字体的大小尺寸

字体家族（系列)

体粗细 100~900整数

字体样式：是否倾斜（倾斜)

字体的连写（简写）

  <style>
        .p1{
            font-size: 30px;
            font-family: "华为彩云" "宋体";
            宽度 nomal 400 正常 700 bold加粗
            font-weight: bold;
			normal不倾斜  正常 italic
            font-style: italic;
        }
        .p2{
            font-size: 10px;
            font: italic bolder 50px "黑体" "仿宋"; 
        }
    </style>

3.基础选择器

1.标签选择器：通过标签名，找到页面中所以这类标签，设置样式

2.类选择器：在标签上添加clss属性，属性值就是类名

id选择器：一个标签只能有一个id，一个id只能选中一个标签

4.通配符

 内嵌式
    <style>
    p{
        color:rebeccapurple;
    }
    a{
        color: gold;
    }
    .p1{
        background-color: hotpink;
    }
    .green{
        color: green;
    }
    #p2{
        color: gold;
    }
    *{
        color: blue;
    }
    </style>
    <p>
        1.标签选择器：通过标签名，找到页面中所以这类标签，设置样式<br/>
    </p>
    <p>
        例如：p{} --- 所有的p标签
    </p>
    <a href="#">asssss</a>
    <a href="#">dsssss</a>
    <p class="p1">
        2.类选择器：在标签上添加clss属性，属性值就是类名
    </p>
    <p class="p1 green">类名可以重复，一个类可以有多个类名，使用空格隔开</p>
    <p id="p2">
       3. id选择器：一个标签只能有一个id，一个id只能选中一个标签
    </p>

4.选择器优先级

通配符 < 标签选择器 < 类选择器

<style>
        *{
            color: red;
        }
        p{
            color: yellow;
        }
        .a{
            color: blue;
        }
        #b{
            color: darkgreen;
        }
    </style>
    <p class="a" id="b">
        通配符 < 标签选择器 < 类选择器
    </p>

5.文本样式text

1.文本方向首行缩进

2.控制字母 capitalize 首字母大写

3.空白处理

4.单词距离

5.文本缩进 em字体

6.文本/图片水平对齐居中方式 left左 center居中 right右

7.去除下划线

8.行高:把行高设置成父元素的高度，可以实现单行文本垂直居中

9.字符间距

10.文本装饰

 <style>
        p{
            color: red;
        }
        .p{
            text-indent: 2em;
            text-transform: uppercase;
            white-space: nowrap;
            word-spacing: 1em;
        }
        .p1{
            text-indent: 10px;
        }
        .P2{
            text-align: center;
        }
        a{
            text-decoration: none;
        }
        tr{
            text-align: center;
            background-color: aqua;
            line-height: 100px;
            letter-spacing: 10px;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
    <p class="p1">
        文本缩进<br>
        首行缩进 aaaaaaaaaaaaaaaaaaaaaaaaa
    </p>
    <p class="p2">ssssssssssssssssssss</p>
    <a href="#">消除下划线</a>
    <table border="1" height="200px" width="200px">
        <tr>
            <td>姓名</td>
            <td>性别</td>
        </tr>
    </table>

6.div标签

1.div是一个块元素
    2.默认没有高度
    3.默认宽是父元素的100%
    4.div的作用，通常和css一起使用，div+css实现页面的布局

   <style>
        .a{
            background-color: antiquewhite;
            height: 400px;
            width: 400px;
        }
    </style>
</head>
<body>
    <div class="a">
        1
        2
        3
    </div>

7.背景

背景颜色

背景图片

背景重复

no-repeat 不重复

repeat 默认值，重复

repeat-x水平重复

repeat-y垂直重复

背景位置

 <style>
        body{
            height: 800px;
            background-color: yellow;
            background-image: url(img/faviconmn.ico);
            no-repeat 不重复
            repeat 默认值，重复
            repeat-x水平重复
            repeat-y垂直重复
            background-repeat: no-repeat;
            background-position:500px 200px;
            background: yellowgreen url(img/faviconmn.ico) no-repeat 500px 200px;
        }
    </style>

8.并集，交集

1.男,88

2.男胖子88

3.女胖子88

4.男，88 或者

<style>
        .s1,
        .s8{
            background-color: aqua;
        }
        .s1.s3.s8{
            color: yellow;
        }
        .s2.s3.s8{
            color:green;
        }
        .s1,.s8{
            font-size: 30px;
        }
    </style>
    <p>
        1.男s1   2.女s2
        3.胖子s3  4.瘦子s4
        5.富婆s5  6.穷鬼s6
        7.18s7    8.88s8
    </p>
    <span class="s1 s3 s8">男,胖子,88</span>
    <span class="s2 s3 s8">女,胖子,88</span>
    <span class="s1 s3 s8">男,胖子,88</span>
    <span class="s2 s4 s5 s7">女,瘦子,富婆,18</span>

9.高级选择器

后代选择器

li标签中所以的span标签

子选择器；直接后代

<style>
        li span {
            color: red;
        }
        li>span{
            font-size: 50px;
        }
    </style>
    <ul>
        <li>
            <p>你好<span>世界</span></p>
            <span>那你当初申请</span>
        </li>
        <li>
            <p>你好<span>世界</span></p>
            <span>那你当初申请</span>
        </li>
        <li>
            <p>你好<span>世界</span></p>
            <span>那你当初申请</span>
        </li>
    </ul>

10.伪类选择器

鼠标移入

<style>
        p{
            background-color: yellowgreen;
        }
        p:hover{
            background-color: yellow;
        }
        h1:hover{
            color: red;
        }
        h2:hover i{
            color: red;
        }
    </style>
    <p>
        这是个p标签
    </p>
    <h1>
        这是h1
    </h1>
    <h2>
        <b>qqqqqqqqqqqqqqqqqqqqq</b>
        <i>iiiiiiiiiiiiiiiiiiiii</i>
    </h2>

11.元素类型display

1.行内元素，不会自己换行，没有高和宽 a,b,strong,span

2.块元素，独占一行，可以设置高和宽，默认宽度为100%，高度为内容高度，h1,h6,p,div

3.行内块，可以有高和宽，但是不会自己换行，td，img

4. 块元素，类似于h标签，可以有高宽，但是没有h标签的含义,高度默认由内容决定,宽默认的是100%

<style>
        a{
          /* block块，inline行内，inline-block行内块，none隐藏*/
          display: block;
          height: 300px;
          background-color: aqua;  
        }
        h3{
            display: inline;
            height: 300px;
            background-color: blue;
        }
        h1{
            /*行内块 */
            display: inline-block;
            height: 300px;
            width: 400px;
            background-color: yellow;
        }
        /* 隐藏元素*/
        P{
            display: none;
        }
        p{
            display: block;
        }
        .a{
            background-color: hotpink;
            height: 300px;
            width: 400px;
        }
    </style>
</head>
<body>
    <p>
      1
      2
      3
    </p>
    <a href="#">a1</a>
    <a href="#">a2</a>
    <h1>aaaaaaa</h1>
    <h3>vvvvv</h3>
    <h3>zzzzz</h3>
    <div class="a">
qqqqqqqqqqqqqqqqqqqqqqqqq
    </div>

12.clear清除浮动

 <style>
        .a{
            background-color: aqua;
        
        }
        .b{
            height: 30px;
            width: 300px;
            background-color: brown;
            float: left;
        }
        .c{
            height: 500px;
            width: 800px;
            background-color: aqua;
        }
        .d,
        .e{
            height: 200px;
            width: 400px;
            float: left;
            background-color: blue;
        }
        .e{
            background-color: red;
        }
        .f{
            /* 清除浮动，清除浮动对后边元素的影响 */
            /*clear: both;*/
            height: 300px;
            width: 800px;
            background-color: brown;
        }
        .cl::after,
        .cl::before{
            content: "";
            display:table;
        }
        .cl::after{
            clear: both;
        }
        .bb{
            height: 80px;
            width: 800px;
            background-color: blue;
            float: left;
        }
        .cc{
            height: 200px;
            background-color: aqua;
        }
    </style>
    <div class="a">
    <div class="b"></div>
    </div>
    <div class="c">
        <div class="d"></div>
        <div class="e"></div>
        <div class="f cl"></div>
    </div>
    <div class="aa cl">
        <div class="bb">bb</div>
    </div>
    <div class="cc">cc</div>

13.使用无序列表导航

1.去掉圆点

2.让li水平排列

3.加上间距

4.文字垂直居中

 <style>
        ul{
            list-style: none;
        }
        ul li{
            float: left;
            padding: 0 10px;
            background-color: aqua;
            height: 50px;
            line-height: 50px;
        }
        ul li:hover{
            background-color: wheat;
        }
    </style>
    <ul>
        <li>现在</li>
        <li>距离</li>
        <li>前面</li>
        <li>新年</li>
        <li>给你</li>
        <li>物质</li>
        <li>本来</li>
        <li>小说</li>
    </ul>

14.浮动布局

 <style>
        .head{
            height: 40px;
            background-color: brown;
        }
        .center{
            width: 1226px;
            width: 800px;
            /* 水平居中 */
            margin: 0 auto;
            background-color: antiquewhite;
        }
        .a{
            height: 100px;
            background-color: aqua;
        }
        .b{
            height: 460px;
            width: 234px;
            background-color: rgb(147, 222, 135);
            float: left;
        }
        .c{
            height: 460px;
            width: 992px;
            background-color: blue;
            float: left;   
        }
        .d{
            height: 500px;
            background-color: red;
            /* 清楚浮动(浮动所带来的影响) */
            clear: both;
        }
    </style>
    <div class="head"></div>
    <div class="center">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
        <div class="d"></div>
    </div>

15.nav导航

l.去除内边距和外边距

2.去除样式

3.横过来调整距离垂直居中

 <style>
        .nav{
            height: 50px;
            background-color: pink;
        }
        ul{
            height: 50px;
            width: 800px;
            /*l.去除内边距和外边距*/
            padding: 0;
            margin: 0 auto;
            /*2.去除样式*/
            list-style: none;
        }
        li{
            /*3.横过来*/
            float: left;
            /*调整距离*/
           padding: 0 35px;
            /*垂直居中*/
            line-height: 50px;
            font-size: 16px;
        }
        a{
            color: azure;
            text-decoration: none;
        }
        li:hover{
            background-color: #080;
        }
    </style>
    <div class="nav">
    <ul>
        <li><a href="#">链接1</a></li>
        <li><a href="#">链接2</a></li>
        <li><a href="#">链接3</a></li>
        <li><a href="#">链接4</a></li>
        <li><a href="#">链接5</a></li>
        <li><a href="#">链接6</a></li>
    </ul>
    </div>

16.结构伪类选择器

1.ul中li标签

2.隔行变色偶数：2n even

3.奇数：2n+1 2n-1 odd

<style>
        /* ul中li标签的第一个 */
        ul li:first-child{
            background-color:#cc1e1e;
        }
        /* ul中li标签最后一个 */
        ul li:last-child{
            background-color: #4ed70a;
        }
        /* ul中的li标签的第2个 */
        ul li:nth-child(2){
            background-color: #d7d00a;
        }
        /* ul中的li标签的倒数第2个 */
        ul li:nth-last-child(2){
            background-color: #d7d00a;
        }
        /* 隔行变色 */
        /* 偶数：2n even */
        .a p:nth-child(2n){
            background-color: yellow;
        }
        /* 奇数： 2n+1 2n-1 odd */
        .a p:nth-child(odd){
            background-color: green;
        }
        /* 前2个 */
        .a p:nth-child(-n+2){
            color: #cc1e1e;
        }
        /* 后2个 */
        .a p:nth-last-child(-n+2){
            color: #3709be;
        }
        /* 从个 */
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<div class="a">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
</div>

17.绝对定位

绝对定位:相对于有定位的父元素进行移动如果父元素没有定位，找父元素的父元素，直到body 脱离标准流，原来的位置不保留一般和相对定位一起使用.

<style>
        .a{
            height: 300px;
            background-color: aqua;
            position: relative;
        }
        .b{
            height: 200px;
            width: 400px;
            background-color: red;
            position: absolute;
            left: 0px;
            top: 300px;
        }
        .c{
            height: 300px;
            background-color: blue;
        }
    </style>
    <div class="a">
        <div class="b"></div>
    </div>
    <div class="c"></div>

18.相对定位

相对定位：相对于自己进行移动不会脱离标准文档流保留原来位置

  <style>
        div{
            height: 300px;
            width: 800px;
        }
        .a{
            background-color: aqua;
        }
        .b{
            background-color: yellowgreen;
            position: relative;
            top: 50px;
            left: 50px;
        }
        .c{
            background-color: green;
        }
    </style>
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>

19.固定定位

固定定位：现对于浏览器进行移动脱离标准文档流.

 <style>
        body{
            height: 5000px;
            background-image: url();
        }
        .a{
            background-color: aqua;
            height: 400px;
            width: 100px;
            /*固定定位*/
            position: fixed;
            right: 0px;
            top: 200px;
        }
    </style>
</head>
<body>
    <p>
yyyyyyyyyyyyyyyyyyy
    </p>

20.其他表单

1. 下拉列表  input中需要list属性，值和 datalist 中的id值一致
2.  带输入框的下拉
3. 分组下拉
4. 多行文本域:多行文本域可以自由调整大小
5. 提交按钮 普通按钮 重置按钮 提交按钮 图片按钮

<form action="#" method="get">
        <select name="s">
            <option value="北京">北京</option>
            <option>南京</option>
            <option>东京</option>
            <option selected>西京</option>
        </select><br>
        <input type="text" name="a" list="sr">
        <datalist id="sr">
            <option>中国</option>
            <option>米国</option>
            <option>小人国</option>
            <option>国</option>
        </datalist><br>
        <select name="b">
            <optgroup label="菠萝">
                <option>情歌</option>
                <option>蓓蓓</option>
            </optgroup>
            <optgroup label="苹果">
                <option>辣椒</option>
                <option>篱黑</option>
            </optgroup>
        </select><br>
        <textarea name="s" cols="30" rows="10"></textarea>
        <hr>
        性别：
        <label>
            男<input type="radio" name="sex" value="男">
        </label>
        <label>
            女<input type="radio" name="sex" value="女">
        </label><br>
       
        <label for="aaa">姓名：</label>
        <input type="text" name="name" id="aaa">

        <br>
        <button>提交按钮</button>
        <button type="button">普通按钮</button>
        <button type="reset">重置按钮</button>
        <button type="submit">提交按钮</button>
        <button><img src="img/下载.png"> </button>
    </form>

21.flex布局

给父元素加上弹性布局 :display: 把父元素变成了弹性容器父元素的直接子元素会变成弹性盒子弹性盒子默认按照主轴方向排列相当于添加了一个浮动

 <style>
        ul{
            padding: 0;
            margin: 0;
            list-style: none;
            display: flex;
            /* 从终点开始排列 */
            justify-content: flex-end;
            /* 主轴居中 */
            justify-content: center;
            /* 空白间距均分在弹性盒子两侧*/
            justify-content: space-around;
            /* 空白间距均分在相邻盒子之间 */
            justify-content: space-between;
            /* 弹性盒子与容器之间间距相等 */
            justify-content: space-evenly;
        }
        img{
            height: 40px;
        }
    </style>
</head>
<body>
    <ul>
        <li><img src="" alt=""></li>
        <li><img src="" alt=""></li>
        <li><img src="" alt=""></li>
        <li><img src="" alt=""></li>
        <li><img src="" alt=""></li>
    </ul>