HTML+ CSS 学习 (二)

HTML+ CSS 学习 (二)

文章目录

  • HTML+ CSS 学习 (二)
    • 1、CSS背景样式?
    • 2、CSS边框样式?
    • 3、CSS文字样式?
    • 4、CSS段落样式?
    • 5、CSS复合样式:
    • 6、CSS选择器?
    • 7、CSS继承?
    • 8、CSS优先级?
    • 9、CSS盒子模型?
    • 10、标签分类?
    • 11、显示框类型?
    • 12、标签嵌套规范?
    • 13、溢出隐藏?
    • 14、透明度与手势?
    • 15、最大、最小宽高?
    • 16、CSS默认样式?

1、CSS背景样式?

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 ( 背景位置是按照浏览器进行偏移的 )

2、CSS边框样式?

border-style : 边框样式
solid : 实线
dashed : 虚线
dotted : 点线
border-width : 边框大小
px …
border-color : 边框颜色
red #f00 …

边框也可以针对某一天边进行单独设置 : border-left-style : 中间是方向 left、right、top、bottom

颜色:透明颜色 transparent

3、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 没有倾斜属性的字体也可以设置倾斜操作。

4、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 : 定义行高

什么是行高,一行文字的高度,上边距和下边距的等价关系。
默认行高:不是固定值,而是变化的。根据当前字体的大小再不断的变化。

取值:1. number( px )   |  scale ( 比例值 , 跟文字大小成比例的 )

letter-spacing : 字之间的间距
word-spacing : 词之间的间距 ( 针对英文段落的 )

英文和数字不自动折行的问题:
1. word-break : break-all; (非常强烈的折行)
2. word-wrap : break-word;(不是那么强烈的折行 ,会产生一些空白区域)

5、CSS复合样式:

复合的写法,是通过空格的方式实现的。复合写法有的是不需要关心顺序,例如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 √
    注:如果非要混合去写的话,那么要先写复合样式,再写单一样式,这样样式才不会被覆盖掉。

6、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{}


    使用的场景:
    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 : 孩子
    

7、CSS继承?

文字相关的样式可以被继承
布局相关的样式不能被继承 ( 默认是不能继承的,但是可以设置继承属性 inherit 值 )

8、CSS优先级?

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

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

  3. 单一样式优先级
    style行间 > id > class > tag > * > 继承

    注:style行间 权重 1000
    id 权重 100
    class 权重 10
    tag 权重 1

  4. !important
    提升样式优先级,非规范方式,不建议使用。( 不能针对继承的属性进行优先级的提升 )

  5. 标签+类与单类
    标签+类 > 单类

  6. 群组优先级
    群组选择器与单一选择器的优先级相同,靠后写的优先级高。

  7. 层次优先级

    1. 权重比较
      ul li .box p input{} 1 + 1 + 10 + 1 + 1
      .hello span #elem{} 10 + 1 + 100

    2. 约分比较
      ul li .box p input{} li p input{}
      .hello span #elem{} #elem{}

9、CSS盒子模型?

组成 : content -> padding -> border -> margin
物品 填充物 包装盒 盒子与盒子之间的间距

   content : 内容区域  width和height组成的

   padding : 内边距(内填充)
        只写一个值: 30px (上下左右)
        写两个值 : 30px 40px ( 上下、左右 )
        写四个值 : 30px 40px 50px 60px(上、右、下、左)

    单一样式只能写一个值:
        padding-left
        padding-right
        padding-top
        padding-bottom

    margin : 外边距(外填充)
        只写一个值: 30px (上下左右)
        写两个值 : 30px 40px ( 上下、左右 )
        写四个值 : 30px 40px 50px 60px(上、右、下、左)

    单一样式只能写一个值:
        margin-left
        margin-right
        margin-top
        margin-bottom
    注:
        1. 背景色填充到margin以内的区域 (不包括margin区域)    
        2. 文字在content区域添加。
        3. padding不能为负数,而margin可以为负数。

box-sizing:
盒尺寸,可以改变盒子模型的展示形态。
默认值: content-box : width、height -> content
border-box : width、height -> content padding border

使用的场景:    
    1. 不用再去计算一些值
    2. 解决一些100%的问题

盒子模型的一些问题:
1. margin叠加问题,出现在上下margin同时存在的时候。会取上下中值较大的作为叠加的值。
2. margin传递问题,出现在嵌套的结构中,只是针对margin-top的问题。

扩展:
1. margin左右自适应是可以的 ,但是上下自适应是不行的。( 如果想实现上下自适应的话,需要在第二大部分来进行学习 )
2. width、height不设置的时候,对盒子模型的影响,会自动去计算容器的大小,节省代码。

10、标签分类?

按类型
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. 挨在一起,但是支持宽高

注:布局一般用块标签,修饰文本一般用内联标签

按内容
Flow:流内容
Metadata:元数据
Sectioning:分区
Heading:标题
Phrasing:措辞
Embedded:嵌入的
Interactive:互动的
(详情:https://www.w3.org/TR/html5/dom.html)

按显示
替换元素 :浏览器根据元素的标签和属性,来决定元素的具体显示内容。
img、input …
非替换元素 : 将内容直接告诉浏览器,将其显示出来。
div、h1、p …

11、显示框类型?

display: block inline inline-block none …

区别:
display:none 不占空间的隐藏
visibility: hidden 占空间的隐藏

12、标签嵌套规范?

ul、li
dl、dt、dd
table、tr、td

块能够嵌套内联
    
块嵌套块
特殊: 错误的写法:

内联是不能嵌套块 错误的写法:
特殊: 正确的写法:

13、溢出隐藏?

overflow :
visible : 默认
hidden
scroll
auto
x轴、y轴
overflow-x、overflow-y针对两个轴分别设置

14、透明度与手势?

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

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

rgba() : 0 ~ 1

注:可以让指定的样式透明,而不影响其他样式
cursor : 手势
    default : 默认箭头
    要实现自定义手势:
        准备图片: .cur 、 .ico 
        cursor : url(./img/cursor.ico),auto;

15、最大、最小宽高?

min-width、min-height
max-width、max-height

%单位:换算 -> 已父容器的大小进行换算的

一个容器怎么适应屏幕的高 : 容器加height:100%; body:100%; html:100%;

html,body{ height:100%;}
.contrainer{ height:100%;}

16、CSS默认样式?

没有默认样式的: div、span

有默认样式的:

body ->  marign : 8px
h1 ->  margin : 上下 21.440px
       font-weight : bold
p  ->  margin : 上下 16px
ul ->  margin : 上下 16px  padding : 左 40px
       默认点:list-style : disc
a ->   text-decoration: underline;
css reset : 
    *{ margin:0; padding:0;}
        优点:不用考虑哪些标签有默认的margin和padding
        缺点:稍微的影响性能
        body,p,h1,ul{ margin:0; padding:0;}

    ul{ list-style : none;}    

    a{ text-decoration: none; color:#999;}

    img{ dispaly:block}
        问题的现象:图片跟容器底部有一些空隙。
            内联元素的对齐方式是按照文字基线对齐的,而不是文字底线对齐的。
             vertical-align: baseline;  基线对齐方式,默认值
              img{ vertical-align:bottom;} 解决方式是推荐的

    写具体页面的时候或一个布局效果的时候:
        1. 写结构
        2. css重置样式
        3. 写具体样式

你可能感兴趣的:(HTML,+,CSS)