HTML与CSS学习笔记(2)

1、CSS背景样式？

background-color 背景色

background-image 背景图

url（背景地址）

默认：会水平垂直铺满背景图

background-repeat 平铺方式

repeat-x x轴平铺

repeat-y y轴平铺

repeat（x和y都进行平铺，默认值）

no-repeat 都不平铺

background-position 背景位置

x y 如果为正数：图片就会往右和下进行偏移；如果为负数：图片往左和上进行偏移

还可以用单词：

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-top-style；中间是方向，可以是left、right、top、bottom

颜色：透明颜色 transparent

3、css文字样式？

font-family：字体类型

    英文、中文

    衬线体与非衬线体

    注：

    1、当字体名字中有空格的时候要用单引号引起来

    2、多个字体类型的设置目的

font-size：字体大小

    默认：16px

    写法：number（px）、单词（small、large...不推荐使用）

    注：字体大小一般为偶数

font-weight：字体粗细

    模式：正常（normal）、加粗（bold）

    写法：单词（normal）、数值（100 200....900；100-500都是正常的，600-900都是加粗的）

font-style：字体样式

    模式：正常（normal）、斜体（italic）

    注：oblique也是表示斜体，用的比较少

    区别：1、italic：所有带有倾斜属性的字体的才可以设置

        2、oblique没有倾斜属性的字体也可以设置倾斜操作

4、css段落样式？

text-decoration：文本装饰

下划线:underline

删除线:overline

下划线:line-through

不添加任何样式：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（这种写法ok）

        style、weight、size、family（也对）

        style、weight、size/line-height、family（也对）

注：如果非要混合这写，要先写符合样式，再写单一样式，这样单一样式才不会被覆盖掉（就近原则）

6、css选择器？

1、ID选择器

    #elem{} id="elem"

    注: 1、id值是唯一值：在一个页面中只能出现一次，出现多次是不符合规范的

        2、命名规范：由字母、下划线、中划线、数字（并且第一个不能是数字）

        3、驼峰写法：searchButtom（小驼峰） searchSmallButtom

           短线写法：search-small-buttom

           下划线写法：search_small_buttom

        4、快捷写法：div#elem按回车或者tab键自动补全：<div id="elem"></div>

2、class选择器

    .elem{} class="elem"

    1、class选择器是可以复用的

    2、可以添加多个class样式

    3、多个样式的时候，样式的优先级根据css决定，而不是class属性中的顺序

    4、标签+类的写法:如p.box(要连在一起写)

    5、快捷写法：div.elem按回车或者tab键自动补全：<div class="elem"></div>

3、标签选择器(TAG选择器)

        div{}       <div></div>

        使用的场景：

            1、去掉某些标签的默认样式

            2、复杂的选择器中，如层次选择器

4、群组选择器(分组选择器)

    可以通过逗号的方式，给多个不同的选择器添加同一的CSS样式，来达到代码的复用

    div,#text,.title{background: hotpink;}

5、通配选择器

    *{}->div,h1,h2...{}

    注：尽量不要使用通配选择器，因为会给所有的标签样式，慎用

    使用的场景：

        1、去掉所有标签的默认样式时，

6、层次选择器

    后代 M N{}      M与N空格隔开，M标签中所有的N标签都修饰

    父子 M>N{}      只关注M标签直属下的N标签，不管N标签中嵌套的N标签

    兄弟 M~N{}       选中当前M下面（不是嵌套在里面）的所有兄弟N标签

    相邻 M+N{}      当前M标签下面相邻的第一个N的标签

7、属性选择器

    M[attr]{}

    =：完全匹配

    *=：部分匹配

    ^=：起始匹配

    $=:结束匹配

    [][][]:组合匹配

8、伪类选择器

    M:伪类{}

    ：link      访问前的样式    （只能添加给a标签）

    ：visited   访问后的样式     （只能添加给a标签）

    ：hover     鼠标移入的样式   （可以添加给所有的标签）

    ：active    鼠标按下时的样式    （可以添加给所有的标签）

    注意：1、一般的网站都只设置hover：

            a{} （link、visited、active） a：hover{}

        2、四个属性都写的时候一定要注意顺序：L V H A

        3、link visited只能给a标签加，hover和active可以给所有标签加

    ：after、：before   通过伪类的方式给元素添加一些文本内容,使用content属性

    :before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素:

             #example:before {

                content: "#";

                color: red;

            }

            #example:after {

                content: "$";

                color: red;

            }

    :checked、：disabled、：focus   都是针对表单元素的伪类选择器

    结构性伪类选择器

        nth-of-type()、nth-child()

        角标是从1开始的，1表示第一项，2表示第二项|n值   表示从0到无穷大（可以利用n来进行隔行换色的需求，2n表示偶数，2n+1表示奇数）

        注：3n+1表示3个元素为一组，三个元素中的第一个元素被选中

        first-of-type：

        last-of-type：

        only-of-type：当只有一个元素的时候对该元素修饰

        nth-of-type()、nth-child()区别

            type：类型

            child：孩子

7、css继承

文字相关的样式可以被继承:比如在div标签里面添加font-size和color样式，则div标签里的标签如p标签也会继承这些样式

布局相关的样式不能被继承：（默认是不能继承的，但是可以设置继承属性）比如div标签里面的width等布局样式div里面的标签比如p标签不会继承

8、css优先级

1、当设置相同样式时，后面的优先级较高（就近原则：谁更接近body标签谁更有效），但不建议出现重复设置样式的情况

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=14

            .hello span #elem{}                    权重：10+1+100=111

            所以第二个层次优先级高

            注：1与10与100是等级的意思，并不存在100个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 20px 10px（上、右、下、左）

    单一样式只能写一个值

        padding-left

        padding-right

        padding-top

        padding-bottom

    margin：外边距（外填充）

        只写一个值：30px（上下左右）

        写两个值：30px 40px（上下、左右）

        写四个值：30px 40px 20px 10px（上、右、下、左）

    单一样式只能写一个值

        margin-left

        margin-right

        margin-top

        margin-bottom

    注：

        1、背景色会填充到margin以内的区域（包括padding、content、border，不包括margin）

        2、文字内容在content区域显示

        3、padding不能为负数，但是margin可以为负数

box-sizing：

    盒尺寸：可以改变盒子模型的展示形态。

    默认值：content-box：width、height->content（仅有content分配width和height）

    border-box：width、height->content、padding、border（三者分配width和height）

    使用的场景：

        1、不用再去计算一些值（比如保持盒模型整体尺寸下加padding、margin等属性）

        在不使用box-sizing的情况下加padding和margin会使盒子变大。

        2、解决一些百分比的问题

盒子模型的一些问题：

    1、margin叠加问题：出现在上下margin同时存在的情况下.回取上下中值较大的作为叠加的值

        解决方案：

            1、BFC规范

            2、想办法只给一个元素添加间距

    2、margin传递问题，出现在嵌套的结构中，只是针对于margin-top,即父元素会随着子元素移动，其他三个方向没有传递问题

        解决方案：

            1、BFC规范

            2、给父容器加边框

            3、margin换成padding

扩展：

    1、margin左右自适应是可以的，但是上下自适应是不行的（有冲突），实现上下自适应之后学习

    2、width、height不设置的时候对盒子模型的影响。会自动去计算容器（不用手动减去padding等值）的大小，节省代码。

10、标签分类？

按类型：

    block：div、p、ul、li、h1.....

        特性：

        1、独占一行

        2、支持所有样式

        3、不写宽的时候跟父元素的宽相同

        4、所占区域是一个矩形

    inline：span、strong、a、em、img..

        1、挨在一起的

        2、有的样式不支持，例如：width、height、margin和padding（某一方向不支持）

        3、不写宽的时候，宽度有内容决定

        4、所占的区域不一定是矩形

        5、内联标签之间有空隙，原因：换行产生的,解决方案看例子（用font-size）

    inline-block：input、select....

        1、挨在一起，但是支持宽高

    注：布局一般用块标签，修饰文本用内连标签

按内容：

    Flow：流内容

    Metadata：元素据

    Sectioning：分区

    Heading：标题

    Phrasing：措辞

    Embedded：嵌入的

    Interactive：互动的

    （详情https://html.spec.whatwg.org/multipage/dom.html）

按显示：

    替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容(比如img要通过具体属性来操作具体显示效果)

        注意img虽然是inline，但也属于替换元素，具有替换元素的特性所以可以设置inline没有的宽高属性

    非替换元素：将内容直接告诉浏览器，将其显示出来（如h1）

11、显示框类型

display:none 不占空间的隐藏

visibility: hidden; 占空间的隐藏

display：block

display：inline-block

display：inline

12、标签嵌套规范

ul、li

dl、dt、dd

table、tr、th、td

块标签可以嵌套内联标签

    <div>

            <p></p>

    </div>

块嵌套块（块标签不一定能嵌套块标签）

    <div>

        <div></div>

    </div>

    特殊：

        p标签不能内嵌块标签

内联标签是不能嵌套块标签的

    <span>

        <div></div>

    </span>

    这是错误的

    特例：

    <a href="#">

        <div></div>

    </a>

13、溢出隐藏

overflow：

    visible：默认

    hidden：隐藏

    scroll：无论内容多少出现滚动条

    auto：内容多时出现滚动条

    x轴、y轴

        overflow-x、overflow-y针对两个轴分别设置

14、透明度与手势

opacity：0（透明：占空间）~1（不透明）

0.5（半透明）

    注：占空间、所有字内容也会透明,rgba属性则不会

rgba():0~1

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

cursor：手势

default:默认箭头

要实现自定义手势：

准备图片：.cur .ico(格式要求)

cursor: url(../img/bilibili_16px_1188649_easyicon.net.ico),auto;

15、最大、最小宽高

min-width、min-height：>=某个值，该范围内可自由伸缩

max-width、max-height;<=某个值，该范围内可自由伸缩

%单位：换算->以父(与爷爷(body)没关系)容器的大小进行换算的

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

    html,body{height:100%；}

    .container{height:100%;}

16、css默认样式

没有默认样式：

    span、div.....

有默认样式：

    body->有margin默认样式

    h1...h6->有上下margin默认样式

    ul li->默认：margin：上、下 16px padding：左 40px

        list-style:disc

    p

    a->text-decoration: underline;

注：有的默认样式便利，有的妨碍计算要清除

17、css reset

简单的css reset方案：

    *{margin：0；padding：0；}

        优点：不用考虑哪些标签有默认的margin和padding

        缺点：这样会稍微地影响性能

    ul{list-style:none;}

    a{text-decoration: none;}

    img{display:block;}

        内联的问题：图片跟容器底部有一定的空隙

            内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的

            vertical-align: baseline;基线对齐方式、默认值

            img{vertical-align: bottom;}解决方式是推荐的

    写具体页面的时候或一个布局效果的时候：(一般的设计步骤 重点)

        1、写结构（html）

        2、css重置样式

        3、写具体样式

巴特西

HTML与CSS学习笔记(2)

最新文章

热门文章