Web前端学习整理(二)

CSS样式学习:

-css(cascading style sheets)层叠样式表.以html为基础,具有丰富的功能,包括:装饰网页,修饰各种标签排版,改变字体的样式,设置图片等等.

样式设置:

css代码主要可以分为:内部样式|外部样式|内联样式三种.

-内部样式:写在html文件的<style>标签中,常设置在头部<head>标签中.

<head>
    <style>
      /*css代码样式*/
    </style>
</head>

-外部样式:在html文件外部单独设置一个css文件,然后通过link引入.

-单独设置css文件

<head>
    <link href="demo.css"  rel="stylesheet">
</head>

-内联样式:又称行内样式,写于标签头部,直接装饰.

<body>
    <p style="css代码">语句块</p>
</body>

        注意:行内样式虽然书写方便,权重较高,但是美亚由实现结构跟样式的分离,不便于代码维护,且不可以重复利用.内部样式也未实现结构和样式的分离,因此也不容易重复利用.外部样式实现了结构和样式的分离,可以重复利用,但是更加适合css代码量较多的情况下.

选择器:

-css样式用于选择html标签元素,并可以让相应的样式应用上去.

-id选择器:

        id命名唯一,单个标签不允许有多个id出现,同页面中不允许出现多个id标签名.

        

-类选择器:

        通过命名类名称和.选择器的方式来选取选择器添加相关的样式.

<style>
        .para1{
            color: aliceblue;
        }
</style>

-标签选择器:

        通过标签名来选取并添加样式.

-后代选择器:

        通过&nbsp(空格)来选择后代选择器.

-通配选择器:

        *选中页面里的所有选择器.

选择器权重:

-css选择器权重是用来确定当多个规则应用于同一个元素的时候,哪种样式能让元素优先显示.

        -权重分布:!important>行内样式>id选择器>class选择器>标签>通配>继承.