初学CSS

小小fw

于 2022-11-18 20:54:32 发布

阅读量58

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/m0_61213423/article/details/127929305

版权

CSS简介

网页分成三个部分

html 结构 30个左右标签，先用一段时间
css 表现外在显示的样子
js 行为

html 超文本语言

css -层叠样式表 —网页是一个多层的结构，css可以给每一层结构设置样式，最终你看到的是最上面的一层

CSS书写位置

第一种方式：内联样式/行内样式

书写位置：开始标签 style属性，讲css样式写在style属性值里面可以写多个样式，只要用分隔号；隔开即可

优缺点：优点：有针对性

缺点：1、结构和表现耦合了

2、修改起来不方便

注意：不推荐使用

第二种方式：内部样式表

书写位置：head标签内部，写一个style标签，通过选择器选中对应的html结构，在花括号里面书写css样式，可以写多组样式，样式之间用；隔开,最后一个样式后可以不加分隔号，但一般都加上

优缺点：缺点：复用率不高

注意：css比较多的时候，不推荐使用，但教学期间，用的可能比较多

第三种方式：外部样式表

书写位置：在html文件外，新建一个.css文件，在css文件里通过选择器选中对应的html结构，在花括号里面书写css样式,然后在head标签内写一个link标签将对应的css文件引入到html文件内

注意：推荐使用

CSS语法

css语法：样式名，样式值

color 设置字体的颜色 red green yellow

font-size 设置字体的大小 px 默认的字体大小是16px

background-color 设置背景颜色 red green yellow

<div style="color: yellow; font-size: 32px; background-color: green">德韩极老尚啦安救是航中，知才陛，太后太。</div>
    <div style="color: yellow; font-size: 32px; background-color: green">少俭子夹评他，导密。</div>
    <div style="color: yellow; font-size: 32px; background-color: green">磊要杀足都骨场，屯。</div>

    <p>磊书放台五勇而郭骨玉护使司上若说谷人快。</p>
    <p>变白惜君其定亲春平曰设弄给国，我爱苟有。</p>
    <p>了第程迷洪不是未本汪在年竟生秦自撒，认。</p>

    <h1>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut, iste.</h1>
    <h1>Lorem ipsum dolor sit amet.</h1>
    <h1>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</h1>

/* css注释符号 */

CSS的注释，作用和HTML注释类似，只不过它必须编写在style标签中，或者是css文件中

CSS的语法：

选择器声明块

选择器：有多种选择器

声明块：具体的css样式，是写在花括号里面

样式的结构：名值对结构（样式名：样式值；），可以写多组样式，用分隔号隔开

CSS常用选择器

四种常用的选择器

1、元素选择器（标签选择器）

作用：选中对应标签的内容

语法：标签名{css样式····}

例子：h1{}，h3{},p{}

2、id选择器

作用：选中对应id属性值的内容

语法：#id属性值{}

例子：#p1{},#p2{}····

注意：id属性值不能重复使用

3、class选择器

class选择器的用法跟id选择器是一样，只不过class属性值可以重复使用

作用：选中对应class属性值的内容

语法：.class属性值{}

注意：class属性值可以起多个，中间用空格隔开即开

例子：.s1{},.ss{},.pp{}

4、通配选择器

作用：选中所有的标签，进行设置

语法：*{}

CSS复合选择器

复合选择器两种交集选择器，并集选择器

1、交集选择器

作用：选中同时符合多个条件的内容

语法：选择器1选择器2选择器3····{}

注意：如果选择器当中有元素选择器，元素选择器必须要放在最前面

例子：p#p1.pp{},div.ss{}

2、并集选择器（群组选择器）

作用：同时选中对应的内容

语法：选择器1,选择器2,选择器3····{}

例子：.red,#red1,div,p{}

关系选择器

1、子元素选择器

作用：通过指定的父元素找到指定的子元素

语法：父元素>子元素{}

例子：#red>.green{}, .pp>em{}

2、后代选择器

作用：通过指定的祖先元素找到指定的后代元素

语法：祖先元素后代元素{}

例子：.class .red{},#red p{}

3、下一个兄弟选择器

作用：通过指定的兄长找到紧挨着我的一个兄弟

语法：兄+弟{}

4、选择下面所有的兄弟(前面的不选)

作用：通过指定的兄长找到下面所有的兄弟

语法：兄～弟{}

例子：#red～.p1{}

元素之间的关系

父子关系

父元素直接包含子元素的元素

子元素直接被父元素包含的元素

祖先后代关系

祖先元素直接或间接包含元素的元素，包括父元素

后代元素直接或间接被包含的元素，包括子元素

兄弟关系

拥有共同父元素的元素

属性选择器

1:属性选择器

通过确定属性以及属性值来选中对应的内容，例如id属性，class属性，src属性，href属性

语法：[属性名]{} 选择含有指定属性的元素

[属性名=属性值]{} 选择含有指定属性和属性值的元素

[属性名^=属性值]{} 选择属性值以指定值开头的元素

[属性名$=属性值]{} 选择属性值以指定值结尾的元素

[属性名*=属性值]{} 选择属性值含有某值的元素

[id] {
        background-color: green;
      }
      p[title] {
        color: red;
      }
      [title=ab]{
        color: orange;
      }
      [title^=ab]{
        font-size: 30px;
      }
      [title$=ab]{
        background-color: pink;