css：初学

Tomtutu

已于 2022-11-15 19:38:31 修改

阅读量109

点赞数

文章标签：前端

于 2022-10-08 11:04:11 首次发布

本文链接：https://blog.csdn.net/Tomtutu/article/details/127204983

版权

1.css文本标签

2.常用标签

<h1>一级标签</h1>
    <h2>二级标签</h2>  
    <h3>三级标签</h3>
    <h4>四级标签</h4>
    <h5>五级标签</h5>
    <h6>六级标签</h6>
    <p></p> 段落标签
    <br /> 换行标签
<strong>我爱你</strong> 或者<b></b>
    <em>我爱你</em> 或者<i></i>
    <del>我爱你</del> 或者 <s></s>
    <ins>我爱你</ins> 或者 <u></u>
 <div>我是一个div标签，我是一个人独占一行</div>
    <span>百度</span> //一个小盒子，可以在一行
    <span>新浪</span>
    <span>微博</span>

3.文件目录

<img src="../image/112.jpg" alt="不算很帅"> //上一级目录 ../
    <img src="/111.img"/> //下一级目录 /
<img src="../image/112.jpg" alt="不算很帅"> //上一级目录 ../
    <img src="http://112.53.97.236:9500/5g-uav-patrol/20211112/be2be80aders=host62da2d26664ef871168884d0b5e04e2091f9de5" alt="不算很帅"> //上一级目录 ../
<!-- <a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像</a>   -->
    <!-- href: 用于指定链接目标的url地址，（必须属性） 当为标签应用href属性时，它具有超链接的功能 -->
    <!-- target：用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口打开方式 -->
    <a href="https://www.baidu.com/" target="_blank">百度</a>

4.超链接

<!-- <a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像</a>   -->
    <!-- href: 用于指定链接目标的url地址，（必须属性） 当为标签应用href属性时，它具有超链接的功能 -->
    <!-- target：用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口打开方式 -->
    <!-- 外部链接 -->
    <a href="https://www.baidu.com/" target="_blank">百度</a>
    <!-- 内部链接 -->
    <a  href="../04-标题标签.html">sss</a>  
    <!-- 空链接，不会跳转 -->
    <a  href="#">空链接</a>   
    <!-- 下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件 -->
    <a href="../112.zip">下载文件超链接</a>
     <!-- 锚点链接,点击我们的链接，可以快速定位到页面中的某个位置 -->
        <!-- 在链接文本的href属性中，设置属性值为#名字的形式，如<a a href= "#two">第二集</a> -->
        <!-- 找到目标位置标签，里面添加一个id属性 = 刚才的名字，如：<h3 id="two">第二集介绍</h3> -->
        <!-- 如果有相同的id则会跳转到第一个id的位置 -->
    <a href="#01">空</a>
    <!-- 网页元素链接：在页面中的各种网页元素，文本，图像，表格，音频，视屏都可以添加超链接 -->
    <a href="http://www.baidu.com" target="_blank"><img src="../112.jpg" /></a>
    <a href="http://www.baidu.com" target="_blank"><img src="../112.jpg" /></a>
    <a href="http://www.baidu.com" target="_blank"><img src="../112.jpg" /></a>
    <a href="http://www.baidu.com" target="_blank"><img src="../112.jpg" /></a>
    <h4 id="01">你真mei</h4>
    <a href="http://www.baidu.com" target="_blank"><img src="../112.jpg" /></a>
    <h4 id="01">你真高</h4>
    <a href="http://www.baidu.com" target="_blank"><img src="../112.jpg" /></a>

5.特殊字符

<!-- 特殊字符 -->
    image.png&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jijiiji &lt;&lap; &gt;

6.表格标签

   <table>
        <thead>
            <tr>
                <th>排行</th> 
                <th>关键字</th> 
                <th>趋势</th> 
                <th>今日搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="images/向上箭头.jpg" /></td>
                <td>345</td>
                <td>123</td>
                <td><a href="https://tieba.baidu.com/f?kw=%B9%ED%B4%B5%B5%C6&fr=ala0&loc=rec&dyTabStr=MCw2LDIsMyw0LDEsNSw4LDcsOQ%3D%3D" target="_blank">贴吧</a><a href="https://tiebapic.baidu.com/forum/w%3D580%3B/sign=6…au=2022-10-12-05_b5728919fde7c6cc2aecdbfa21f4ffcc">图片</a><a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF%E5%85%A8%E9%9B%86/10009439?fr=aladdin" target="_blank">百科</a></td>
            </tr>
            <tr>
                
            </tr>
            <tr>
                
            </tr>
            <tr>
                
            </tr>
            <tr>
                
            </tr>
            <tr>
                
            </tr>
            <tr>
                
            </tr>
        </tbody>
        
    </table>

<!-- 合并单元格 -->
        <!-- 跨行合并：rowspan="合并单元格的个数" -->
        <!-- 跨列合并：clospan="合并单元格的个数" -->
    合并单元格三部曲：
        1.先确定是跨行还是跨列合并
        2.找到目标单元格，
        3.删除多余的单元格
        <table width="500" height="249" border="1" cellspacing="0">
            <tr>
                <td colspan="2">1</td>
                <td>3</td>
                <td>4</td>
            </tr>
           <tr>
                <td>a</td>
                <td>b</td>
                <td rowspan="2">c</td>
                <td>d</td>
            </tr>
            <tr>
                <td>01</td>
                <td>02</td>
                <td>04</td>
            </tr>
          
        </table>

7.列表标签

<!-- 表格是用来显示数据的，列表是用来布局的
    列表最大的特点就是整齐、整洁、有序， -->
    三类列表
        1.无序列表（重点）
        2.有序列表
        3.自定义列表
    无序列表的基本语法格式如下：
        <ul>
            <li>列表项1</li>
            <li>列表项2</li>
        </ul>
        1.无须列表的各个列表项之间是没有顺序级别之分的，是并列的
        2.<ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他的标签或者文字是不允许的
        3.<li></li>之间相当于一个容器，可以容纳所有元素
    有序列表：<ol></ol>标签用于定义有序列表，列表排序以数字来显示，并使用<li></li>标签来定义列表项
        有序列表的基本语法
            <ol>
                <li>列表项1</li>
                <li>列表项2</li>
            </ol>
    自定义标签： 
        自定义标签语法：
            <dl>
                <dt>名词1</dt>
                <dd>名词1解释1</dd>
                <dd>名词1解释2</dd>
            </dl>

8.表单标签

<!-- 表单域是一个包含表单元素的区域
    在HTML标签中使用<form>标签用于定义表单域，以实现用户信息的收集和传递 -->
    <form action="demo.php" method="get" name="name1"> 
        <!-- 文本输入 ： value的值只在文本框里面显示 -->
        用户名：<input type="text" name="username" value="请输入用户名"> <br>  
        <!-- 密码输入，不显示铭文 -->
        密码： <input type="password" name="pwd" > 
        <br>
        <!-- radio：单选按钮
        name属性是表单元素的名字在这里性别单选按钮必须是相同的name属性,才可以实现多选一
        value的值在单选框和复选框里面是不显示的
        checked 按钮在打开页面的时候就默认选中，一般在单选和多选框里使用 -->
        性别：男 <input type="radio" name="sex" value="1" checked="checked">女 <input type="radio" name="sex" value="1"> <br>
        <!-- checkbox: 复选框 ,可以实现多选 -->
        兴趣爱好：吃饭<input type="checkbox" name="hobby"> 睡觉 <input type="checkbox" name="hobby"> 打豆豆 <input type="checkbox" name="hobby"> <br>
        <!-- 点击提交按钮，会把表单域里面的值提交给后台服务器 -->
        <input type="submit" value="1212"><br>
        <!-- 初始化表单数据 -->
        <input type="reset" value="重新填写"><br>
        <!-- 不会提交数据，常和javascrip结合使用 -->
        <input type="button" value="获取验证码"><br>
        <!-- 文件域，使用场景，上传文件使用的 ，value 不起作用 -->
        <input type="file" value="请选择你要上传的文件">
    </form>
<form action="12.222">
        你的性别是：
        <input type="radio" name="sex" id="nv"> <label for="nv">女</label> 
        <input type="radio" name="sex" id="nan"> <label for="nan">男</label>

        <!-- select下拉表单元素 -->
        <select name="" id="">
            selecred:默认选项
            <option value="" >选项1</option>
            <option value=""selected="selected">选项2</option>
            <option value="">选项3</option>
        </select>
        <!-- textarea: 文本域标签 -->
        今日反馈：
        <textarea rows="3" cols="10" >默认文本</textarea>
    </form>

9.自制表单

<h4>青春不常在，抓紧谈恋爱</h4>
    <table width="600" border="1" style=" border-collapse:collapse;">
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex" id="nan">  <label for="nan"> <img src="../image/nan.jpg" alt="">男</label>
                <input type="radio" name="sex" id="nv">  <label for="nv"> <img src="../image/nv.jpg" alt="">女</label>   
            </td>
        </tr>
        <tr>
            <td>生日：</td>
            <td>
                <select>
                    <option value="" selected>请选择年</option>
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                </select>
                <select name="" id="">
                    <option value="" selected>请选择月</option>
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>所在区域</td>
            <td>
                <input type="text" value="北京思密达">
            </td>
        </tr>
        <tr>
            <td>婚姻状况</td>
            <td>
                <input type="radio" name="婚姻" id="hunyin1"><label for="hunyin1">未婚</label> 
                <input type="radio" name="婚姻" id="hunyin2"><label for="hunyin2">已婚</label> 
                <input type="radio" name="婚姻" id="hunyin3"><label for="hunyin3">离婚</label> 
            </td>
        </tr>
        <tr>
            <td>喜欢的类型</td>
            <td>
                <input type="checkbox" name="喜欢" id="like1"> <label for="like1">妩媚的</label>
                <input type="checkbox" name="喜欢" id="like2"> <label for="like2">可爱的</label>
                <input type="checkbox" name="喜欢" id="like3"> <label for="like3">小鲜肉</label>
                <input type="checkbox" name="喜欢" id="like4"> <label for="like4">老腊肉</label>
                <input type="checkbox" name="喜欢" id="like5"> <label for="like5">都喜欢</label>
            </td>
        </tr>
        <tr>
            <td>自我介绍</td>
            <td>
                <textarea name="" id="" cols="30" rows="10" >自我介绍</textarea>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="submit" name="" id="" value="免费注册">
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <a href="http://ww.baidu.com">我是会员，立即登录</a>
            </td>
        </tr>
        <h3>我承诺</h3>
        <tr>
            <td></td>
            <td>
                <ul>
                    <li>年满18、单身</li>
                    <li>抱着严肃的态度</li>
                    <li>真诚寻找另一半</li>
                </ul>
            </td>
        </tr>
    </table>

10.选择器

<style>
        /* 选择器 {样式} */
        /* 给谁改样式{ 改什么样式} */
        /* 选择器分为：1.基础选择器 2.符合选择器
            基础选择器是由单个选择器组成的
            基础选择器有分为：标签选择器、类选择器、id选择器和通配符选择器 */
        /* 标签选择器 */
        p {
            color: aquamarine;
            font-size: 23px;
        }
        p {
            color: green;
        }
        div {
            color: pink;
        }
        /* 类选择器 口诀：样式点定义  结构类（class）调用  一个或多个 开发最常用  */
        .pink {
            background-color: pink;
            width: 100px;
            height: 100px;
            border: 2px;
        }
        .green {
            /* 背景颜色  */
            background-color: green;
            width: 100px;
            height: 100px;
        }
        #pink1 {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        /* 通配符选择器 css中，通配符选择器使用“*”定义，它表示选取页面所有元素（标签） */
        * {
          color: #000;  
          /* 可以使用多个字体，如果存在第一个字体，则使用第一个字体  */
          font-family: 'Microsoft YaHei' , times;
        }
    </style>

11.字体样式

<style>
        *{
            color: red;
        }
        h2 {
          font-family: 'Microsoft YaHei';  

        }
        p{
            font-family:'Times New Roman', Times, serif; 
            font-size: 19px;
        }
        body {
            font-size: 28px;
            /* 标题标签比较特殊，需要单独指定字体大小 */
            font-weight: 1000;
        }
        #ii {
            color: aquamarine;
            font-weight: 400;
            font-style: italic;
        }
        /* em {
            font-style: normal;
        } */
        /* 
            font :设置字体属性
            font-size :设置字体大小
            font-family:设置字体字体
            font-weight :设置字体粗细
            font-style:设置字体样式
        */
    </style>

12.文本属性

<style>
        /* 文本颜色 */
        p {
            /* color: rgb(192, 255, 241); */
            color: #FF0000;
            /* color: rgb(240, 255, 252); */
        }
        /* 文本对齐  */
        div {
            text-align: center;
        }
        /* 装饰文本  上划线，下划线  只能同时存在一个*/
        span {
            text-decoration: overline;
            /* text-decoration: underline; */
        }
        a {
            text-decoration: none;
        }
        /* 文本缩进 */
        .book {
            text-indent: 20px;
        }
        p {
            /* em相对单位：当前文字的字体大小 如果当前元素没有定义大小，则继承父元素 */
            text-indent: 3em; 
        }
        /* 文本行间距 */
        p {
            line-height: 19px;
        }
    </style>

13.三种样式表

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        /* 内部样式表，理论上可以放在任意的位置，我们一般放在head里面 */
        p {
            color: red;
            font-size: 50px;
        }
        #huhu {
           color: #000; 
        }
    </style>
    <!-- 外部样式表，需要使用link标签引入 -->
    <link rel="stylesheet" href="1.css">
</head>
<body>
    <p>我是一枚帅哥</p>
    <!-- 行内样式表  --> 
    <p style="color: yellow; font-size: 18px" >我是一个美女</p>
    <p  id="huhu">我是一个美女</p>
</body>
</html>

14.emmet语法

<!-- div*3 -->
    <div></div>
    <div></div>
    <div></div>
    <div class="aa"></div>
    <div id="dddd"></div>
    <!-- .grt -->
    <p class="onr"></p>
    <span class="grt"></span>
    <!-- ul>li -->
    <ul>
        <li></li>
    </ul>
    <!-- div+li -->
    <div></div>
    <li></li>
    <!-- div.demo$*3 -->
    <div class="demo1"> </div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <!-- div{你是美少女战士吗}*4 -->
    <div>你是美 少女战士吗 </div>
    <div>你是美少女战士吗</div>
    <div>你是美少女战士吗</div>
    <div>你是美少女战士吗 </div>
    <div>你是粉红色的吗 </div>
    <!-- div{$}*5  -->
    <div>1 </div>
    <div>2 </div>
    <div>3</div>
    <div>4</div>
    <div>5</div>

15.并集选择器

div,
        p {
            color: pink;
        }

16.伪类选择器

Tomtutu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫