HTML CSS

最新推荐文章于 2023-12-26 22:56:06 发布

信代码，得永生

最新推荐文章于 2023-12-26 22:56:06 发布

阅读量405

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_23979811/article/details/105009034

版权

1、容器标签 - 块级元素

<div> </div>  常用与页面的模块划分
<span></span> 用于行内分区

CSS介绍：
    Cascading style sheets 层叠样式表
    1、作用：为元素设置样式，美化页面
    2、使用方式：
        1、内联样式（行内样式）
            语法 <标签 style="CSS样式规则">
            样式规则 ：width ： 200px
        2、常用属性：
            width： 去数值，单位为像素px
            height：取数值，单位为像素px
            background-color：背景颜色
            color：取颜色值，设置文本颜色
            font-size：设置字体大小，单位为px
            font-weight：设置字体为粗体，取值为bold
        3、文档内嵌方式 /* */
            使用<style type="text/css">  </style> 来引入css样式。
            常写在<head></head> 标签中。
            标签内容就是样式规则，
            语法：(在文档中选择所有的div元素为其设置样式）
            <style>
                div{
                     width:300px;
                     height:300px;
                        
                    }
            </style>
            选择文档中的div元素为其设置样式。
        css选择器：
            由选择符号/器  和 样式规则组成。
            选择符用来 规范页面中那些元素需要设置样式，
            样式规则 具体的样式声明。
        4、外链方式引入CSS代码
            1、创建外部的CSS文件  index.css
            2、使用<link rel="stylesheet" href="url" >,书写在<head>标签中
            3、样式表中采用选择器去声明样式
        5、三种元素特点
            1、块元素 不能共行 但可以手动设置 宽高 div  hn  p  ul ol dl li table                                                                     
                td form...
                <div> 这是div <div>
                <h1>  这是大标题 <div>
                <p> 这是段落标签 </p>
            2、行元素 可以与其他元素工行，不能手动设置宽高，大小有内容多少决定。
                <span> spen 文本 </span>
                <strong> strong加粗 </strong>
                <i> i倾斜 </i>
            3、行内块元素 既可以共行也可以手动设置宽高 代表元素 img input
                <img> 加载图片 </img>
                <input> </input>

2、选择器

1、CSS样式表的特点：
    1、 层叠性
        可以对同一个元素设置多个不同样式规则，共同起作用
    2、继承性
        子元素可以可以继承父元素中设置的样式  <a>链接不会继承
        例如：宽元素默认 宽度与副元素保持一致，文本属性都可以被继承。
    3、优先级
        在样式声明发生冲突的时候，需要考虑优先级。
        浏览器样式 <  文档内嵌/外链形式引入(代码书写顺序，原则上后来者居上) < 行内样式

2、CSS选择器（重点）
    1、作用：规范页面中那些元素可以设置样式
    2、分类：
        1、标签选择器   根据标签名在文档中匹配所有的该元素，并为其添加样式
            标签名{
                  属性：值
                  属性：值
                }
        2、id选择器
            作用：根据元素id属性值进行匹配。
            语法：
                <h1 id="id1"></h1>
                #id1{
                    属性：值；
                    属性：值；
                    }
            特点：
                1、命名规范ID  值不能以数字和下划线开头，推荐以英文字母开头，可以出现下            
                划线和数字。
                2、选择符以 # 开头，跟上ID属性值。
                3、id 属性具有唯一性。
                4、id 属性常用来划分为外围结构
        3、类选择器
            作用：根据元素的class属性值进行匹配，可以实现样式复用。
            语法：
                <h1 class="redText2">  </h1>
                .redText2{
                        属性：值；
                        }
            特点：1、命名规则，不允许以数字和下划线开头，推荐小写字母，大小写敏感
                 2、以. 开头跟上class属性值作为选择符
                 3、允许重复使用class值，实现样式服用。
                 4、可以选择多个类选择器
            特殊用法：
                 1、class的属性值可以出现多个，使用空格分隔
                 <h1 class="redText Green"> </h1>
                 2、组合使用，缩小匹配元素范围。标签名在前
                 p.orangeText  表示在p元素中查找类名为orangeText的元素。
       4、群组选择器
            为一组元素共同设置样式(设置外边距)
            div，h1，p{
                    属性：值;
                    }
       5、后代选择器
            为后代元素设置样式
            语法：父元素  子元素{
                               属性：值;
                               }
            注意：
                1、父元素与子元素之间使用空格隔开。
                2、后代元素包含直接子元素和间接子元素
                <ul>
                    <li> 直接子元素
                        <a></a>间接子元素
                    <li>
                <ul&g

最低0.47元/天解锁文章

信代码，得永生

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML CSS

1、容器标签 - 块级元素<div> </div> 常用与页面的模块划分<span></span> 用于行内分区CSS介绍： Cascading style sheets 层叠样式表 1、作用：为元素设置样式，美化页面 2、使用方式： 1、内联样式（行内样式）语法 &lt...
复制链接

扫一扫