css知识点总结1

一：form知识点补充

1.name属性：所有的input框都必须有name属性，相当于是字典的键

2.value属性：需要选择的input框都需要value属性，除了date,相当于是字段的值

3.选择相关的设置默认值得属性：selected checked

p>
     <p>gender:
    <input type="radio" name="gender" value="male"  checked>男
    <input type="radio" name="gender" value="female">女
    <input type="radio" name="gender" value="others">其他
    p>
    <p>hobby:
        <input type="checkbox" value="sing" checked>sing
        <input type="checkbox" value="read">read
        <input type="checkbox" value="jump">jump
    p>

    <p>prvience:
        <select name="prvience" id="">
            <option value="sh" selected>上海option>
            <option value="bj">北京option>
            <option value="tj">天津option>
        select>
    p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

4.form表单朝后端发送数据的时候，标签都必须有name属性，不然该标签的值将不会被发送到后端

5.label和placeholder属性(添加背景提示)

<form action="" >
    <p>
    <label for="d1">username:label>
        <input type="text" name="username" id="d1">
    p>
    <p><label for="d2">password:
        <input type="text" name="password" id="d2"  placeholder="密码">
    label>
    p>
form>
1
2
3
4
5
6
7
8
9
10

二：css基本知识

1.语法结构

选择器 {
    属性名1:属性值1;
    属性名2:属性值2;
}
1
2
3
4

2.注释

/*注释内容*/ 
1

三：引入css样式的三种方式

1.行内式：

"color: green">我是p标签
1

2.style

1
2
3
4
5

3.link

• 1.css中的代码

div {
    background-color: lightpink;
}
1
2
3

"stylesheet" href="1.css">
1

四：选择器之基本选择器

1.标签选择器

 div {
            background-color: pink;
        }
1
2
3

2.id选择器

#d1 {
            color: yellow;
        }
1
2
3

3.class选择器

.span {
            color: green;
        }
1
2
3

4.通用选择器

* {
    color: gold;
}
1
2
3

五：选择器之组合选择器

1.后代选择器：两个标签之间用一个空格隔开,属于空格前面标签里面的空格后面的所有标签都能够被选中

div span {
            color: red;
        }
1
2
3

2.儿子选择器：两个标签之间用>隔开，只能选中是空格前面的标签中一级的空格后面的标签

div>span {
            color: red;
        }
1
2
3

3.弟弟选择器：两个标签之间用_{隔开，可以选中}号前面标签后面所有~号后面的标签，中间被别的标签隔开了也不受影响

 div~span {
            color: green;
        }
1
2
3

4.毗邻选择器:两个标签之间用+隔开，只有紧挨着+号前面标签的+号后面的标签才能够被选中，当中间隔着其他标签的时候将不会被选中

div+span {
            color: green;
        }
1
2
3

六：选择器之属性选择器

1.查找属性名含有name的所有标签

[name] {
        background-color: gold;
    }
1
2
3

2.查找属性名name的属性值是：i1的标签

    [name='i1'] {
        background-color: gold;
    }
1
2
3

3.查找input标签且属性名name的属性值是：i2的标签

input[name='i2'] {
        background-color: gold;
    }
1
2
3

七：css选择器之分组于嵌套

1.分组

定义：当多个选择器查找到的标签需要调整相同的样式的时候，可以将他们用逗号隔开，写在一起，并且合并之后彼此不会干扰

#d1,span,p {
            color: pink;
        }
1
2
3

2.嵌套

定义：在选择器的基础上添加额外的选择器，使得查找更加的精准

"c1">div
"c1">span
"c1">p

1
2
3
4
5
6
7
8
9
10
11

八：css选择器之伪类选择器

1.分类

2.代码演示

    p:hover {
        color: red;
    }

    a:link {
        color: greenyellow;
        font-size: 10px;
    }
1
2
3
4
5
6
7
8

九：css选择器之伪元素选择器

定义：通过css代码来操作标签中的文本内容，注意添加的文字在浏览器中是无法被选中的

      p:first-letter {
          color: pink;
          font-size: 50px;
          font-weight: bold;
      }
      p:first-line {
           color: pink;
          font-size: 50px;  
      }
      {#在文字末尾后面操作#}
      p:after {
          content: 'world';
          color: gold;
      }
      {#在文字开头前面操作#}
      p:before {
          content: '你好';
          color: green;
      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

作用：解决标签浮动，防爬

十：css选择器优先级

1.选择器相同的情况下：就近原则

2.选择器不相同的情况下：行内> id选择器 > 类选择器 > 标签选择器

十一：字体样式

1.分分类

十二：背景属性

1.背景图片(可以是链接图片，也可以是本地图片)

 div {
background-image: 		 url("https://img2.baidu.com/it/u=3744598050,4191464688&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto? sec=1661360400&t=794b49205e38ca1ac73f643b40ed5df3");
height: 800px;
 width: 800px;
       }
1
2
3
4
5

2.背景颜色

 div {
            background-color: rgba(255,135,148,0.99);
            height: 800px;
            width: 800px;
        }
1
2
3
4
5

3.铺背景方式

background-repeat: repeat-x;
1

十三：边框属性

1.属性

border-width: 2px;
border-style: solid;
border-color: red;
1
2
3

2.简写方式

border: 2px solid red;
1

3.边框样式

4.画圆

 p {
            height: 400px;
            width: 400px;
            background-color: greenyellow;
            border-radius: 50%;
        }
1
2
3
4
5
6

十四：display隐藏属性

钓鱼网站惯用的伎俩

#d2 {
            display: none;
        }
1
2
3