20220824 第七小组王茜

CSS

CSS层叠样式表网页美化 html相当于布料，上色如何嵌入样式如何显示html元素样式通常是存储在样式表中把样式表添加到HTML元素中

把样式表添加到HTML中，内容与表现分离（样式和外部结构分离）

定义css样式的方式

1、行内样式

如果当前的样式不需要复用，可以用行内样式优先级

 <p style="background-color:blue">我是p1</p>

2、内联样式（嵌入样式）

（1）标签选择器（2）类选择器：声明样式的时候需要用一个英文的.，选择样式通过class属性，不需要写. （3）id选择器：声明样式需要用一个#号，对应的元素的id要匹配

3、外部样式（推荐）

css选择器：

1、元素选择器 标签名{ }
2、id选择器 #id属性值{ }
3、类选择器 ·class属性值{ }
4、分组选择器(并集选择器)
5、复合选择器(交集选择器)
6、通配选择器
7、后代元素选择器
8、子元素选择器
9、伪类选择器
10、属性选择器
11、兄弟元素选择器

1、标签选择器*：

 p {
            font-family: "仿宋";
        }

2、类选择器*：一个标签元素是可以选择多个样式，样式名中间用空格隔开

    <style>
        .fontStyle {
            color: red;
            font-size: 20px;
            font-family: "楷体";
        }
        .backgroundStyle{
            background-color: yellow;
        }
    </style>
<body>
     <p class="fontStyle backgroundStyle">我爱你中国</p>
</body>

3、id选择器:每个标签元素的id 是唯一不能重复

<style> 
#fontStyle2 {
                color: blue;
                font-size: 30px;
            }
</style>
 <body>

        <input type="text" name="username">
        <input type="password" name="password">
</body>

4、div,p：选中页面上所有的div和p元素

5、div p：选中div里面的p，无论嵌套多少层，都可以找到

6、div>p：选中div里面的直接字标签p

7、div+p：选中紧跟着div的p

8、[type]：选中页面上所有带有type属性的标签

9、[type=text]：选中页面上所有带有type=text属性的标签

10、[type~=t]：选中页面上type属性包含单词的所有元素

11、*伪类选择器：（有顺序，如果在激活后使用悬停，悬停会被覆盖掉）

（1）a:link 初始状态

（2）a:hover 鼠标悬停

（3）a :active 激活状态

（4）a:visited 访问过的

12、nth-child()：选中第几个对应的元素

13、:checked：选中所有被选中的元素

14、属性选择器：

 input[name]{
                height: 100px;
                font-size: 50px;
            }
 input[name=username] {
                color: red;
            }

15、通配符，全部选择器：页面选择器