10.23-10.29博客

CSS笔记：

1.CSS组合选择符：

组合方式： a.后代选择器：以空格分隔，用于选取某元素的后代元素。 b.子元素选择器：以>分隔，只能选择作为某元素直接/一级子元素的元素。（nav>ul比nav ul限定更严格，必须后面的元素只比前面的低一个级别。）c.相邻兄弟选择器：以+分隔，只选择父元素后代第一个子元素，并且后面需要紧跟着一个子元素。d.普通（后续）兄弟选择器：以~分隔，例子如下：

2.CSS伪类：

a.CSS中伪类的语法：selector.class:pseudo-class {property:value;}

b.anchor伪类：链接；

c.伪类与CSS类可以配合使用：a.red:visited {color:#FF0000;}

<a class="red" href="css-syntax.html">CSS 语法</a>

d.CSS：first-child伪类：选择父元素的第一个子元素。

匹配所有作为第一个子元素的 <p>元素中的所有 <i> 元素：p:first-child i

e.lang伪类

3.CSS伪元素：

a.:first-line伪元素：对元素的第一行文本进行格式化。*只能用于块级元素。

b.:first-letter伪元素：用于想文本的首字母设置特殊样式。

c.:before，:after伪元素：可以在元素之前或之后插入新内容。

d.:focus伪元素：选择元素后有焦点。

4.CSS导航栏：

导航栏=链接列表，使用<ul><li>

使用：list-style-type: none; margin: 0; padding: 0;使得边距和填充删除并移除列表前的小标志。

<a>元素可建立一个垂直的导航栏。

可添加“active"类来标注哪个选项被选中。

可以在 <li>&<a>上添加text-align:center 样式来让链接居中。

可以在 border <ul>上添加 border 属性来让导航栏有边框。如果要在每个选项上添加边框，可以在每个 <li> 元素上添加border-bottom

水平导航栏：使用浮动或内联，但链接具有相同大小则必须用浮动。内联：display:inline

在<li>通过border-right样式来添加分割线。

5.CSS下拉菜单

dropbtn 下拉按钮

dropdown 容器

需要定义下拉内容

dropdown-content 下拉内容（默认隐藏）

6.CSS提示工具

基础提示框：Tooltip

tooltip里需要有position: relative; display: inline-block; border-bottom: 1px dotted black;

在tooltip.tooltiptext中position:absolute

提示文本显示在右侧：top:-5px;right:105%

注意 top:-5px 同于定位在容器元素的中间。使用数字 5 因为提示文本的顶部和底部的内边距（padding）是 5px。

添加箭头 ：：after及content属性

​ ( border-width指定了箭头的大小，如果你修改它，也要修改 margin-left 值。这样箭头才能居中显示。)

border-color 用于将内容转换为箭头。设置顶部边框为黑色，其他是透明的。如果设置了其他的也是黑色则会显示为一个黑色的四边形。（ border-color: black transparent transparent transparent;指向下的箭头）

可以使用 CSS3 transition 属性及 opacity （不透明属性来实现提示工具的淡入效果:

.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
opacity: 1;
}

*opacity:不透明；transition:转换

7.CSS图像透明

需要在img标签中加入filter(过滤)：alpha(透明度)（opacity= )

8.CSS媒体类型

@media规则：允许在相同样式表位不同媒体设置不同的形式。

其他媒体类型：

9.CSS属性选择器

属性选择器：[title]把包含标题的搜易元素变成蓝色‘

指定值的title属性的元素，使用~分隔属性和值。

lang属性的元素，使用|分隔。

属性选择器无需使用class或id的样式。

10.CSS表单

a.输入框(input)样式：

• input[type=text] - 选取文本输入框
• input[type=password] - 选择密码的输入框
• input[type=number] - 选择数字的输入框

b.设置box-sizing属性为border-box，这样可以确保浏览器呈现出带有指定宽度和高度的输入框是把边框和内边距一起计算进去的。

c.输入框边框：使用 border 属性可以修改 input 边框的大小或颜色，使用border-radius属性可以给 input 添加圆角。

d.默认情况下，一些浏览器在输入框获取焦点时（点击输入框）会有一个蓝色轮廓。我们可以设置 input 样式为 outline: none; 来忽略该效果。

使用 :focus 选择器可以设置输入框在获取焦点时的样式：可以设置背景颜色等。

e.带动画的搜索框：使用transition属性。

f.文本框（textarea):使用resize属性来禁用文本框可以重置大小的功能（resize:none)

g.下拉菜单（select)

h.cursor(光标) pointer(指针)

11.CSS计数器

使用计数器自动编号

CSS 计数器根据规则来递增变量。

CSS 计数器使用到以下几个属性：

• counter-reset - 创建或者重置计数器

• counter-increment - 递增变量

• content - 插入生成的内容

• counter() 或 counters() 函数 - 将计数器的值添加到元素。

  嵌套选择器：

  在页面创建一个计数器 (在 body 选择器中)，每个 元素的计数值都会递增，并在每个 元素前添加 "Section <计数值>：”

12.CSS网页布局

网页布局一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。

内容区域：

可改变布局：

/* 响应式布局 - 小于 600 px 时改为上下布局 */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}

13.CSS ！important规则

CSS 中的 !important 规则用于增加样式的权重。!important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。

CSS3笔记：

1.CSS3边框

圆角：

border-radius属性可以创造圆角边框。 例子：border-radius:25px,（四个值：左上，右上，右下，左下。三个值：左上，右上和左下，右下。两个值：左上和右下，右上和左下。一个值：四个角值相同。

盒阴影：

box-shadow 例：box-shadow:10px 10px 5px(其中，10px 10px 5px表示阴影的偏移量和模糊半径，分别为水平方向和垂直方向的偏移量为10px，模糊半径为5px。)

2.CSS3背景

顺序	描述	CSS
background-clip	规定背景的绘制区域。	3
background-origin	规定背景图片的定位区域。	3
background-size	规定背景图片的尺寸。	3

3.CSS3渐变(gradients)

语法：background-image: linear-gradient(angle, color-stop1, color-stop2);

从上至下渐变： background-image: linear-gradient(#e66465, #9198e5）

从左到右渐变：background-image: linear-gradient(to right, red , yellow)

对角渐变：to bottom

线性渐变-透明度：为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

repeating-linear-gradient() 函数用于重复线性渐变

径向渐变：radial-gradient

颜色的百分比可以制作不均匀分布的渐变。

size 参数定义了渐变的大小。它可以是以下四个值：closest-side，farthest-side，closest-corner，farthest-corner

4.CSS3文本效果

文本阴影：text-shadow 盒子阴影：box-shadow

5.CSS3 Textflow（正文溢出）属性

ellipsis:省略 clip:夹子

换行：word-wrap:break-word

单词拆分换行：keep-all(不拆) break-all(拆)

新文本属性：

属性	描述	CSS
hanging-punctuation	规定标点字符是否位于线框之外。	3
punctuation-trim	规定是否对标点字符进行修剪。	3
text-align-last	设置如何对齐最后一行或紧挨着强制换行符之前的行。	3
text-emphasis	向元素的文本应用重点标记以及重点标记的前景色。	3
text-justify	规定当 text-align 设置为 “justify” 时所使用的对齐方法。	3
text-outline	规定文本的轮廓。	3
text-overflow	规定当文本溢出包含元素时发生的事情。	3
text-shadow	向文本添加阴影。	3
text-wrap	规定文本的换行规则。	3
word-break	规定非中日韩文本的换行规则。	3
word-wrap	允许对长的不可分割的单词进行分割并换行到下一行。	3

6.CSS3字体

@font-face规则：可用font-family来引用字体，必须在src中定义字体文件的URL。

7.CSS3 2D转换(transform)

方法：

• translate(x,y) 从当前的位置想x和y平移。只在X轴上则是translateX(n)
• rotate(30deg) 正值顺时针旋转
• scale(2,3) 转变宽度为原来的大小的2倍，和其原始大小3倍的高度。小于1则是缩小。
• skew(x,y) 在x和y轴方向倾斜。
• matrix() 有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
  注释：CSS前面内容在笔记本上