美文网首页
css基本知识

css基本知识

作者: 白富美也在学代码 | 来源:发表于2022-06-11 20:50 被阅读0次

    认识css

    css作用:给网页中的每个元素进行化妆,排版布局,让网页更精美

    完全没有使用css的页面:基本就是一堆从上到下的,从左到右挨在一起的文本和图片

    css的全称:Cascading Style  Sheets  层叠样式表

    css版本:css1--css2--css2.1--css2.2

    学习网站:https://www.w3.org/TR/CSS22          https://www.w3.org/TR/CSS22/propidx.html      https://www.w3.org/TR/CSS22/propidx.html


    css的写法

    属性名:属性值

    css3种方式将样式应用到元素上:

    1.内联(行内)样式inline  

    <h1 style="font: size 10px;color: red;background-color: antiquewhite;">我是标题</h1>

    2.文档样式表、内嵌样式表:结构和样式分离

    <style>

            .title{

                font-size: 50px;

                color: red;

                background-color: antiquewhite;

            }

        </style>

        <h2 class="title">我是标题1</h2>

    3.外部样式表

    <link rel="stylesheet" href="css/style.css">

    <style>

            @import url("css/style.css");

        </style>

    <h2 class="title">我是标题1</h2>

    样式文档里引入样式文档

    /* css编码 */

    @charset "utf-8";

    /* 引入样式文件 */

    @import url(/xx.css);


    css基础选择器

    按照一定的规则选择元素,并赋予样式

    分类:通用选择器

               元素选择器

    h1{}

    div{}

               类选择器(一个元素可以有多个类,以空格进行分割。)

    <style>

            h2{

                color: bisque;

            }

            .large_font{

                font-size: 60px;

            }

        </style>

        <h2 class="title large_font">我是标题1我的字体也想是60</h2>

        <p class="large_font">我是段落字体是60</p>

    <!-- 类命名规范1.见名之意2.多个单词时之间怎么连接--可以用中划线large-font或者下划线large_font或者驼峰largeFont -->

               id选择器,同一个页面id名不可重复

       <style>
         #content{

                color: blue;

            }

        </style>

       <div id="content">id选择器</div>

               属性选择器

               组合选择器

               伪类/伪元素

    css常见属性

    全部小写

    HTML和CSS编写规则

    1.结构和样式的分离

    2.

    相关文章

      网友评论

          本文标题:css基本知识

          本文链接:https://www.haomeiwen.com/subject/crgimrtx.html