第四十四天

Posted 2020-11-27 xueba

https://www.cnblogs.com/clschao/articles/10082587.html

昨日内容回顾

html

标签分类

内敛标签 不独占一行

块级标签 独占一行

<img> 自封闭
<div> </div>  全封闭

head 标签

? meta 标签 配置信息

body 标签

h1~h6 b u  s i p span  div br hr img a form input table ul ol li select label textarea dl dt dd
标题   加粗 斜体 下划线
特殊符号 &nbsp 空格 ..

input

type 属性
text password date radio checkbox file submit reset button hidden

name 属性
    分组 提交数据时的 key  提交的数据 value 

value 属性  指定默认值

readonly 只读
disabled 禁用 

form 表单

img

a

<a href =‘https://www.baidu.com‘ target = ‘_self‘>  本窗口打开
    _blank 

今日内容

css 选择器- 层叠样式表

选择器+声明

h1 {color:red;font-size:14px;}

选择器  color 属性 red值
				/
			声明

head 标签里写 第一种 用选择

        div{
            color:red;
            background-color:red;
            height: 100px;
            width: 100px;
        }

内敛的 第二种 不用选择 直接写在里面

<div style=‘ color:red;
            background-color:red;
            height: 100px;
            width: 100px;‘>

单独的css文件引入 第三种

<link rel=‘stylesheet ‘ href= ‘test.css ‘>

意识

** 引入图片 引入相对路径

基本选择器

元素选择器 #元素名

类选择器 .类名

        div{
            color:red;

        }
        .c1{color:green;      类选择器
        }
        #大物{color:green;      元素选择器
        }

大的 div 都是红色

特殊的单独列出来 这个优先级高

组合选择器

div 下面的 c1 类

        div.c1{color:green;
        }
选择 div 下面的 c1   不选别的

后代选择器 子子孙孙

div a {color:red;}

儿子选择器

/*选择所有父级是 <div> 元素的 <p> 元素*/

div>a

毗邻选择器(下面挨着的一个)

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

弟弟选择器 找到后面同级的 兄弟标签

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

属性选择器

/*用于选取带有指定属性的元素。*/
p[title] {
  color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
  color: green;
}

正则选择

/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
  color: red;
}

/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
  color: yellow;
}

/*找到所有title属性中包含（字符串包含）hello的元素*/
[title*="hello"] {
  color: red;
}

/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
[title~="hello"] {
  color: green;
}

分组和嵌套

分组

div, p {
  color: red;
}
　上面的代码为div标签和p标签统一设置字体为红色。

嵌套

.c1 p {
  color: red;
}

.c1类内部所有p标签设置字体颜色为红色。

伪类选择器

未访问链接
a:link{
color:#ff0000
}
已访问链接
a:visit{
color:#00ff00
}

鼠标移动到链接上
a:hover{
color:#ff00ff
}
选定的链接
a:active{
color:#0000ff
}

input输入框获取焦点的 样式

input:focus {   #input默认的有个样式，鼠标点进去的时候，input框会变浅蓝色的那么个感觉
  #outline: none;
  background-color: #eee; #框里面的背景色
}

a的其他设置

用法1：这个表示的是：当鼠标悬浮在a这个样式上的时候，a的背景颜色设置为黄色

a:hover
    {
        background-color:yellow;
    }
用法2:

使用a 控制其他块的样式：

　　使用a控制a的子元素 b：

.a:hover .b {
        background-color:blue;
    }
使用a控制a的兄弟元素 c(同级元素)：
.a:hover + .c {
        color:red;
    }
使用a控制a的就近元素d：
.a:hover ~ .d {
        color:pink;
    }

伪元素选择器

首字母调整

div:first-letter{
font-size:48px;
color:red
}

每个元素前面插入元素 before

div:before{
}

p:before {
  content:"*";
  color:red;
}

后面 after

/*在每个<p>元素之后插入内容*/
p:after {
  content:"[?]";
  color:blue;
} 

before和after多用于清除浮动。后面讲

选择器的优先级

内联样式 1000 将css 写进标签里面

id 选择器 100 #d1

类选择器 10 .c1

元素选择器 1

继承优先级 0

? 权重永不进位

　**万不得已可以使用!important ** 强制生效

css 属性相关

　　　　width属性可以为元素设置宽度。

　　　　height属性可以为元素设置高度。

　　　　块级标签才能设置宽度，内联标签的宽度由内容来决定。

font-family 文字字体

body {
  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}

字体大小

p {
  font-size: 14px;
}

字重（粗细）

值	描述
normal	默认值，标准粗细
bold	粗体
bolder	更粗
lighter	更细
100~900	设置具体粗细，400等同于normal，而700等同于bold
inherit	继承父元素字体的粗细值

文本颜色

1. ffffff

2. rgb(255,0,0)
3. red

还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

文本对应方式text-align

text-align

值	描述
left	左边对齐 默认值
right	右对齐
center	居中对齐
justify	两端对齐

文字装饰　text-decoration

none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
inherit	继承父元素的text-decoration属性的值

常用的为去掉a标签默认的自划线：

a {
  text-decoration: none;
}

首行缩进

将段落的第一行缩进 32像素：

p {
  text-indent: 32px; #首行缩进两个字符，因为我记得一个字在页面上的默认大小为16px
}

背景属性

/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url(‘1.jpg‘);  #url里面是图片路径，如果和你的html文件在一个目录下，使用这种相对路径就行了，来个葫芦娃图片试一下

background-repeat: no-repeat; 
/*
 背景重复
 repeat(默认):背景图片沿着x轴和y轴重复平铺，铺满整个包裹它的标签
 repeat-x：背景图片只在水平方向上平铺
 repeat-y：背景图片只在垂直方向上平铺
 no-repeat：背景图片不平铺
*/

/*背景位置*/
background-position: right top;
/*background-position: 200px 200px;*/ #200px 200px 是距离父级标签的左边和上边的距离，以前大家都用雪碧图，就是将很多的网页上需要的小图片组合成一个大图，用这个图中哪个位置的小图片，就通过这个参数来调整，看下面的示例操作，现在很少用这个了

left top | center top | right top
center
bottom

多个小图片放在一个长图上.

这样只用请求一次 就获取了所有图片 然后挪动截取的位置 显示不同的效果

background-position

那么有同学会疑问，为什么要将这些小图片做成一个大图呢？因为其实页面在加载到img标签之后，会单独的往后端发请求，来请求这个图，如果小图很多的话，页面要发好多个请求，那么页面加载的就慢，所以放到一个大图上，每个用这个大图上面的小图的地方，img里面的url都指向这个一个图片的url，这样加载就很快了，因为只需要请求一次，你的网页就拿到了这个图片，其他的请求都可以直接用这个图，而不需要多次请求这个图了，然后通过这个background-position的值来调整。

background:url(‘1.pig‘) no-repeat center bottom;

简写

background:#ffffff url(‘1.png‘) no-repeat right top;

使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求，就是我们刚才说的雪碧图。

一个有趣的例子：鼠标滚动但是背景不动，就是最近发现的，很多电商都在这么搞，你们看过这种效果没有。下面是我模仿着写的一个小例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>滚动背景图示例</title>
    <style>
        * {
            margin: 0;
        }
        .box {
            width: 100%;  #凡是这种使用百分比的，都是按照你父标签的宽度的百分之多少来显示
            height: 500px;
            background: url("https://www.luffycity.com/static/img/width-bank.1c9d1b0.png") no-repeat center center; #这个图片好像没有了，自己找一个网上的图片，把这个url路径换一下，可以到摄图网去看看，国内免费的一个图片网站
            background-attachment: fixed;  #就是这个属性，让你的背景图片固定住的意思，attachment是附属、依附的意思
        }
        .d1 {
            height: 500px;
            background-color: tomato;
        }
        .d2 {
            height: 500px;
            background-color: steelblue;
        }
        .d3 {
            height: 500px;
            background-color: mediumorchid;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="box"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</body>
</html>


鼠标滚动背景不动

边框

　　　　边框属性

　　　　　　1.border-width 宽度

　　　　　　2.border-style 样式

　　　　　　3.border-color 颜色

例子

#i1 {
  border-width: 2px;  
  border-style: solid;
  border-color: red;
}

简写

#i1 {
  border: 2px solid red;
}

　　　边框样式

值	描述
none	无边框。
dotted	点状虚线边框。
dashed	矩形虚线边框。
solid	实线边框。

单独为某一个边框设置样式

#i1 {
  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;
}

border-radius -圆角边框的效果

将border-radius设置为长或高的一半即可得到一个圆形。

border-radius:45%;   通过这个数字调整圆角的度数

50% 刚好是个圆的    低于50 不是圆

浏览器里面输入 之后

document.body.contentEditable=true

里面的数据 可以随便改

display属性

用于控制HTML元素的显示效果。

值	意义
display:"none"	HTML文档中元素存在，但是在浏览器中不显示。一般用于配合javascript代码使用。
display:"block"	默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline"	按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block"	使元素同时具有行内元素和块级元素的特点。

　　　　display:"none"与visibility:hidden的区别：

　　　　visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

　　　　display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

创建标签简写

div*3

<div></div>
<div></div>
<div></div>

div.c1 也可以 .c1 tab键

<div class=‘c1‘></div>

div>a tab

    <div><a href=""></a></div>

div.c1{呵呵}*3

    <div class="c1">呵呵</div>
    <div class="c1">呵呵</div>
    <div class="c1">呵呵</div>

在加一个$符号：

div.c1{呵呵$}*3 排序号

    <div class="c1">呵呵1</div>
    <div class="c1">呵呵2</div>
    <div class="c1">呵呵3</div>            

div.c1{呵$呵}*3 也可以

   <div class="c1">呵1呵</div>
    <div class="c1">呵2呵</div>
    <div class="c1">呵3呵</div>

快速竖列 删除 -- 按住alt键

可以选中竖列的 一起删除

注意一点昂：块级标签不管你设置的宽度是多少，都会占用你整个页面宽度的空间，看下面

display:inline-block 块级改为内联 在一行锁定

display：block 将内联改为块级