Day21-Css与Requests
-
css语法
-
语法:选择器{属性名1:属性值1; 属性名2:属性值2;…}
-
说明:
选择器 - 选中需要设置样式的标签
{} - 固定写法
属性名 - 决定需要设置哪个样式
属性值 - 如果是表示数值大小, 数字值需要单位, 一般是px常用属性: color - 文字颜色(颜色值: 颜色英文单词、rgb(红,绿,蓝)、#颜色值得16进制值)
font-size: 字体大小
backgroumd-color : 背景颜色
-
-
css代码位置
-
内联样式表 - 将css代码写在标签的style属性中(此时不需要写选择器{})
-
内部样式表 - 将css代码写在style标签中(style标签既可以放在head中, 也可以放在body里)
-
外部样式表 - 将css代码写在css文件中, 然后在html里面通过link导入
-
<!-- 内部样式 --> <!-- <style type="text/css"> p{ color: lightseagreen; } a{ color: rgb(27,125,100); } </style> --> <!-- 外部样式 --> <!-- <link rel="stylesheet" type="text/css" href="./css/style1.css"/> -->
-
<!-- <h1>1. 内联样式表</h1> <p style="color: aqua; font-size: 20px; background-color: khaki;" >我是段落1</p> <p style="color: rgb(0,191,255);">我是段落2</p> <a href="">我是超链接1</a> -->
-
<!-- <h1>2. 内部样式案例</h1> <p>我是段落1</p> <a href="">我是超链接1</a> --> <p>我是样式1</p>
-
-
css选择器
-
标签选择器(元素选择器) - 1
直接将标签名作为一个选择器, 选中整个页面中所有的指定标签.
例如: p{} - 选中所有的p标签, a{} - 选中所有的a标签 -
id选择器 - 4
在标签的id属性值前加#作为一个选择器, 选中id属性值是指定值的标签. (同一个页面中id值是唯一的)
例如: #p2{} - 选中id值为p2的标签, #a - 选中id属性值为a的标签 -
类选择器(class选择器) - 2
在标签的class属性值前加.作为一个选择器, 选中class属性值是指定值的所有标签
例如: .c1{} - 选中class属性值为c1的所有标签, .a{} - 选中class属性值为a的所有标签
.c1.c2 - 选中class属性值中同时有c1和c2的标签 -
群组选择器
将多个独立的选择器用’,'隔开作为一个选择器, 选中每个独立选择器选中的所有标签
例如: p,a{} - 选中所有的p标签和所有的a标签
.c1,p{} - 选中所有class是c1的标签和所有的p标签 -
后代选择器
将多个独立的选择器用空格隔开作为一个选择器
例如: p a - 选中所有作为p标签的后代的a标签. (选中p标签下面的a标签, a是p的后代)
div #p1 .c1 - 选中div下面的id为p1下面class为c1的标签 -
子代选择器
将多个独立的选择器用>符号隔开作为一个选择器
例如: p>a - 选择所有作为p标签的子代的a标签 -
div.info{} - 选中class为info的class标签
#p1.c1{} - 选中id是p1并且class是c1的标签p:nth-child(N) - 选中第N个p标签
div p:nth-child(N) - 选中div里面的第N个p标签 -
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 1. 标签选择器 */ /* p{ color: red; } a{ color: aqua; text-decoration: none; } */ /* 2. id选择器 */ /* #p2{ color: skyblue; font-size: 50px; } */ /* 3. class类选择器 */ /* .c1{ color: #00FA9A; } .c2{ background-color: greenyellow; } */ /* 4. 群组选择器 */ /* p,a{ color: firebrick; } */ /* 5. 后代选择器 */ /* div div a{ color: aliceblue; } */ /* 6. 子代选择器 */ div>a{ color: red; } </style> </head
-