第四天day

2023-12-31 09:52:28

1.选择器

1.1元素选择（id和class取名可以相同）

1.标签选择器：通过标签名选择标签

2.id选择器：通过id名选择标签

3.class选择器：通过类名选择标签

1.2关系选择

1.后代选择器（包括选择器）：选择符是空格

2.子代选择器：选择符是>

3.相邻选择器：选择符是+ 通过同级的标签找到给标签的兄弟标签，但是要注意相邻选择只能找到紧挨着的兄弟

4.兄弟选择器：选择符是- 通过同级的标签找到该标签的兄弟标签，只要是兄弟不管是否有隔着其他标签都可以找到，但是必须要同属于同一个父级标签。

1.3属性选择

1.通过标签的属性名选择：选择符 [] 是标签名[属性名]

2.通过标签的属性名加属性值：选择符[] 是标签名[属性名="属性值"]

标签名[属性名~="属性值"]
p[class~="a"]
<p  class="a b"    >      </p>

p[class^="a"]{
				color: blue;
			}
			<p class="ad">你是小丑</p>
			<p class="da">小丑是你</p>

选择第一个

p[class$="a"]{
				color: brown;
			}
            <p class="ad">你是小丑</p>
			<p class="da">小丑是你</p>

选择第二个

1.4伪类选择

不通过class定义类依然有类名可以来供我们使用来选择标签

伪类的语法格式：

选择器（任何选择器）:伪类名{

样式属性:属性值;

}
1.a:link{}     未被访问的状态  (没有放上去)
2.a:hover{}    悬停           (鼠标放上去的状态)
3.a:visited{}  被访问之后      (鼠标点上去松开) 
4.a:active{}   正在被访问      （鼠标按下去不松开）
5.input:focus{}  当获取焦点时的状态
6.input:checked{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			input:checked+p{
				color: #FF0000;
			}
		</style>
		
	</head>
	<body>
	<input type="checkbox">	
	<p>今天天气不错</p>	
	</body>
</html>

以上几种伪类可以理解成是一种状态，当对应的标签被赋予了该伪类时，伪类中的所带样式就会被

写入到标签当中

7. :first-child：找到所有匹配元素的第一个

8. :last-child：找到所有匹配元素的最后一个

9. :nth-of-type(n): n在某些浏览器从零开始

根据小括号内的表达式

1.5伪元素（标签）选择

：在html中并没有写这个标签但是在文件的执行过程当中却会存在

语法格式

选择器::after 通过选择器找到一个或几个标签，再找到的标签的后面添加一个标签

选择器::before 通过选择器找到一个或几个标签，再找到的标签的前面添加一个标签

标签的默认样式

h1-h6：font-weight ，font-size

p:font-size

ul，ol：list-style-type

a:color,text-decoration

img:针对某些特定浏览器在被添加了超链接的情况下会默认有一个边框样式，border

button：border，background-color

input：border

常用样式

width：

height：

px是pixel像素一行有多少*有多行

max-width 设置一个最大宽度值，当浏览器窗口的宽度大于你设置的最大宽度时，按照你设置的最大宽度显示，反之

min-width：设置一个最小的宽度值，当浏览器窗口的宽度小于你设置的最小宽度时，按照你设置的最小宽度显示，否者按照浏览器的宽度显示

枚举色

通过一个单词来表示的颜色，我们就叫枚举色，列如：red，white，black；

十六进制色

#FF红 FF绿 FF蓝

red green blue rgb

用16进制数来记录颜色，也是我们会常用的一种设置颜色的方式

rgb三原色

rgb(255,255,255) 白色一共256个从0开始

rgba(255,255,255) a代表设置颜色的透明度，取值范围0~1之间 0为完全透明，1为完全不透明

背景

background-color 设置背景颜色

background-image:url(路径);不同于img标签要自己设置宽高

background-repeat:;设置背景图片是否重复显示，默认都是repeat，可以设的置有no-repeat ，x-repeat，y-repeat，none。

background-position背景图片定位，可以定位

background-size背景图片尺寸 cover（充满整个盒子空间） contain（等比例放大）

码农公寓