前端 2 CSS

https://www.cnblogs.com/liwenzhou/p/7999532.html

　　1. CSS语法
　　　　　　选择器 {属性1:值1;属性2:值2;}

　　2. CSS导入方式
　　　　　　1. 直接将样式写在标签内部的style属性
　　　　　　2. 在head标签中写style标签
　　　　　　3. 将样式写在单独的css文件中，通过link标签的href属性导入（项目中多用这种）

　　3. CSS选择器 ***** jQuery选择器类似
　　　　　　1. 基本选择器

　　　　　　　　元素选择器、id选择器、类选择器、通用选择器

p {color: "red";}

#i1 {
  background-color: red;
}


注意：

样式类名不要用数字开头（有的浏览器不认）。

标签中的class属性如果有多个，要用空格分隔。
.c1 {
  font-size: 14px;
}
p.c1 {
  color: red;
}


* {
  color: white;
}

基本选择器用法

　　　　　　2. 组合选择器

　　　　　　　　后代选择器、儿子选择器、毗邻选择器、弟弟选择器

/*li内部的a标签设置字体颜色*/
li a {
  color: green;
}

/*选择所有父级是 <div> 元素的 <p> 元素*/
div>p {
  font-family: "Arial Black", arial-black, cursive;
}

/*选择所有紧接着<div>元素之后的<p>元素*/
div+p {
  margin: 5px;
}

/*i1后面所有的兄弟p标签*/
#i1~p {
  border: 2px solid royalblue;
}

组合选择器

　　　　　　3. 属性选择器
　　　　　　4. 分组和嵌套
　　　　　　5. 伪类和伪元素
　　4. CSS选择器的优先级 *****
　　　　　　1. 选择器相同
　　　　　　　　　　下面的优先级越高，覆盖
　　　　　　2. 选择器不同
　　　　　　　　　　不同的选择器的优先级不一样
　　　　　　　　　　内联(1000)>ID选择器(100)>类选择器(10)>元素选择器(1)>继承的(0)

2. CSS属性
1. 高和宽
只有块儿级标签才能设置宽和高
2. 字体属性
1. 用什么字体
2. 字体大小
3. 字体粗细
4. 字体颜色
5. 文字装饰效果
6. 文字对齐
7. 文字缩进

永远不要高估自己！
只要思想不滑坡，方法总比问题多！
听人劝，吃饱饭！

3. 今日任务
1. 回去复习下内置的数据类型和数据类型的方法
2. lambda
3. 把blog整理好

4. 周末作业
1. 先把Blog例子争取自己写一遍
2. 把小米商城能写到哪里写到哪里
具体页面要求见群内截图

造图片的网址：https://dummyimage.com/960x420/000/fff.png

猜你喜欢