前端语法2

background-color 背景色
background-image 背景图
url(背景地址)
默认：会水平垂直都铺满背景图
background-repeat 平铺方式
repeat-x x轴平铺
repeat-y y轴平铺
repeat ( x , y 都进行平铺，默认值 )
no-repeat 都不平铺
background-position : 背景位置
x y : number(px、%) | 单词
x : left、center、right
y : top、center、bottom
background-attachment : 背景图随滚动条移动的方式
scroll : 默认值 ( 背景位置是按照当前元素进行偏移的 )
fixed ( 背景位置是按照浏览器进行偏移的 )
border-style : 边框样式
solid : 实线
dashed : 虚线
dotted : 点线
border-width : 边框大小
px …
border-color : 边框颜色
red #f00 …

    CSS文字样式？

font-family : 字体类型
英文、中文
衬线体、非衬线体
注意点：
1.多个字体类型的设置目的
2.引号的添加的目的
font-size : 字体大小
默认 : 16px
写法 : number(px) | 单词 ( small large … 不推荐使用)
font-weight : 字体粗细
模式： 正常( normal ) 加粗 ( bold )
写法：单词(normal、bold) | number ( 100 200 … 900 , 100到500都是正常的，600都900都是加粗的 )
font-style : 字体样式
模式： 正常 ( normal ) 斜体 ( italic )
写法：单词 ( normal 、 italic )
注：oblique也是表示斜体，用的比较少，一般了解即可。
区别：1.italic 带有倾斜属性的字体的才可以设置倾斜操作。
2.oblique 没有倾斜属性的字体也可以设置倾斜操作。

CSS段落样式？
text-decoration：文本装饰
下划线 : underline
删除线 :line-through
上划线 : overline
不添加任何装饰 : none
注：添加多个文本修饰：line-through underline overline
text-transform：文本大小写 （ 针对英文段落 ）
小写：lowercase
大写：uppercase
只针对首字母大写：capitalize
text-indent : 文本缩进
首行缩进
em单位：相对单位，1em永远都是跟字体大小相同
text-align : 文本对齐方式
对齐方式 : left 、right、center、justify（两端点对齐）

line-height : 定义行高
什么是行高，一行文字的高度，上边距和下边距的等价关系。
默认行高：不是固定值，而是变化的。根据当前字体的大小再不断的变化。
CSS复合样式：

复合的写法，是通过空格的方式实现的。复合写法有的是不需要关心顺序，例如background、border；有的是需要关心顺序，例如font。
复合的写法，是通过空格的方式实现的。复合写法有的是不需要关心顺序，例如background、border；有的是需要关心顺序，例如font。
1. background : red url() repeat 0 0;
2. border : 1px red solid;
3. font :
. 注：最少要有两个值 size family
weight style size family √
style weight size family √
weight style size/line-height family √
注：如果非要混合去写的话，那么要先写复合样式，再写单一样式，这样样式才不会被覆盖掉。
CSS选择器？

八大类选择器

1. ID选择器   
        #elem{}      id="elem"
    注：
    1. ID是唯一值，在一个页面中只能出现一次，出现多次是不符合规范的。
    2. 命名的规范，由字母、下划线、中划线、字母（并且第一个不能是数字）
    3. 驼峰写法 : searchButton (小驼峰)  SearchButton (大驼峰)  searchSmallButton
       短线写法：search-small-button
       下划线写法：search_small_button

2. CLASS选择器
        .elem{}      class="elem"
    注：
    1. class选择器是可以复用的。
    2. 可以添加多个class样式。
    3. 多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。
    4. 标签+类的写法

3. 标签选择器(TAG选择器)
        div{}          <div></div>
       使用的场景：
        1. 去掉某些标签的默认样式时
        2. 复杂的选择器中，如 层次选择器

4. 群组选择器(分组选择器)
        可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用。

5. 通配选择器

    *{  } ->  div,ul,li,p,h1,h2....{}    
    注：尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用。
    使用的场景：
        1. 去掉所有标签的默认样式时           

6. 层次选择器

    后代  M N { }
    父子  M > N { }
    兄弟  M ~ N { }  当前M下面的所有兄弟N标签
    相邻  M + N { }  当前M下面相邻的N标签

7. 属性选择器

    M[attr] {}    
    = : 完全匹配
    *= : 部分匹配
    ^= : 起始匹配
    $= : 结束匹配
    [][][] : 组合匹配

8. 伪类选择器
    M:伪类{}
    :link       访问前的样式    ( 只能添加给a标签 )
    :visited    访问后的样式    ( 只能添加给a标签 )
    :hover      鼠标移入时的样式  (可以添加给所有的标签)
    :active     鼠标按下时的样式  (可以添加给所有的标签)

    注：
        一般的网站都只设置  
            a{}   ( link visited active )    a:hover{}

    :after、:before    通过伪类的方式给元素添加一段文本内容，使用content属性
    :checked、:disabled 、:focus 都是针对表单元素的   

    结构性伪类选择器
        nth-of-type()   nth-child()
        角标是从1开始的，1表示第一项，2表示第二项 | n值 表示从0到无穷大
        first-of-type
        last-of-type
        only-of-type 

        nth-of-type()和nth-child()之间的区别
            type : 类型
            child : 孩子

CSS优先级？

1. 相同样式优先级

2. 当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。

3. 2. 内部样式与外部样式
      内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。

4. 单一样式优先级
   style行间 > id > class > tag > * > 继承
   注：style行间 权重 1000
   id 权重 100
   class 权重 10
   tag 权重 1
   CSS盒子模型？
   组成 : content -> padding -> border -> margin
   物品 填充物 包装盒 盒子与盒子之间的间距
   content : 内容区域 width和height组成的
   padding : 内边距(内填充)
   只写一个值： 30px (上下左右)
   写两个值 : 30px 40px ( 上下、左右 )
   写四个值 : 30px 40px 50px 60px（上、右、下、左）
   盒子模型的一些问题：

   1. margin叠加问题，出现在上下margin同时存在的时候。会取上下中值较大的作为叠加的值。
   2. margin传递问题，出现在嵌套的结构中，只是针对margin-top的问题。
      扩展：
   3. margin左右自适应是可以的 ，但是上下自适应是不行的。( 如果想实现上下自适应的话，需要在第二大部分来进行学习 )
   4. width、height不设置的时候，对盒子模型的影响，会自动去计算容器的大小，节省代码。

5. 标签分类？
   按类型
   block : div、p、ul、li、h1 …
   1. 独占一行
   2. 支持所有样式
   3. 不写宽的时候，跟父元素的宽相同
   4. 所占区域是一个矩形

inline : span 、a、em、strong、img …
1. 挨在一起的
2. 有些样式不支持，例如：width、height、margin、padding
3. 不写宽的时候，宽度由内容决定
4. 所占的区域不一定是矩形
5. 内联标签之间会有空隙，原因：换行产生的

inline-block : input、select …
1. 挨在一起，但是支持宽高

显示框类型？

display: block inline inline-block none ...
区别：
display:none   不占空间的隐藏
visibility: hidden 占空间的隐藏

overflow :
visible : 默认
hidden
scroll
auto
x轴、y轴
overflow-x、overflow-y针对两个轴分别设置
透明度与手势？

opacity : 0(透明) ~ 1(不透明)
    0.5(半透明)

    注：占空间、所有的子内容也会透明

rgba() : 0 ~ 1

    注：可以让指定的样式透明，而不影响其他样式

cursor : 手势
default : 默认箭头
要实现自定义手势：
准备图片： .cur 、 .ico
cursor : url(./img/cursor.ico),auto;
CSS默认样式？

没有默认样式的： div、span

本文地址：https://blog.csdn.net/weixin_43445613/article/details/109277838