CSS学习笔记

1、根据 CSS,子元素从父元素继承属性。(部分浏览器不支持)
2.有关后代选择器有一个易被忽视的方面,即两个元素之间的层次间隔可以是无限的。
例如,如果写作 ul em,这个语法就会选择从 ul 元素继承的所有 em 元素,而不论 em 的嵌套层次多深。
3.与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。
    h1 > strong {color:red;}
4、相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。
    h1 + p {margin-top:50px;}
    这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。
5、不同于类选择器,ID 选择器不能结合使用,因为 ID 属性不允许有以空格分隔的词列表。
6、在 HTML 中,一个 class 值中可能包含一个词列表,各个词之间用空格分隔。
    <p class="important warning"></p>
7、通过把两个类选择器链接在一起,仅可以选择同时包含这些类名的元素(类名的顺序不限)。
8、 属性选择器
    [attribute]             用于选取带有指定属性的元素。
    [attribute=value]     用于选取带有指定属性和值的元素。
    [attribute~=value]     用于选取属性值中包含指定词汇的元素。
    [attribute|=value]     用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
    [attribute^=value]     匹配属性值以指定值开头的每个元素。
    [attribute$=value]     匹配属性值以指定值结尾的每个元素。
    [attribute*=value]     匹配属性值中包含指定值的每个元素。
9、不要在属性值与单位之间留有空格。
    “margin-left: 20 px”错,它仅在 IE 6 中有效
    “margin-left: 20px”对
10、如何插入样式表
    (1)外部样式表:每个页面使用 <link> 标签链接到样式表。<link> 标签在(文档的)头部
        <head>
        <link rel="stylesheet" type="text/css" href="mystyle.css" />
        </head>
    (2)内部样式表
        <style type="text/css">
          hr {color: sienna;}
        </style>
    (3)内联样式:要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。
    (4)多重样式如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。
11、背景色:background-color 不能继承,其默认值是 transparent。
12、CSS 背景属性:
    属性     描述
    background     简写属性,作用是将背景属性设置在一个声明中。
    background-attachment     背景图像是否固定或者随着页面的其余部分滚动。
    background-color     设置元素的背景颜色。
    background-image     把图像设置为背景。
    background-position     设置背景图像的起始位置。
    background-repeat     设置背景图像是否及如何重复。
13、设置链接的样式    
    a:link - 普通的、未被访问的链接
    a:visited - 用户已访问的链接
    a:hover - 鼠标指针位于链接的上方
    a:active - 链接被点击的时刻
14、display 属性:display 属性规定元素应该生成的框的类型。
    none     此元素不会被显示。
    block     此元素将显示为块级元素,此元素前后会带有换行符。
    inline     默认。此元素会被显示为内联元素,元素前后没有换行符。
    inline-block     行内块元素。(CSS2.1 新增的值)
    list-item     此元素会作为列表显示。
    run-in     此元素会根据上下文作为块级元素或内联元素显示。
    compact     CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
    marker     CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
    table     此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
    inline-table     此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
    table-row-group     此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
    table-header-group     此元素会作为一个或多个行的分组来显示(类似 <thead>)。
    table-footer-group     此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
    table-row     此元素会作为一个表格行显示(类似 <tr>)。
    table-column-group     此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
    table-column     此元素会作为一个单元格列显示(类似 <col>)
    table-cell     此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
    table-caption     此元素会作为一个表格标题显示(类似 <caption>)
    inherit     规定应该从父元素继承 display 属性的值。
15、position 属性规定元素的定位类型。
    这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,
    而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
      值                    描述
    absolute     生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
                元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。    
                    (元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。
                     元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。
                     元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。)
    fixed         生成绝对定位的元素,相对于浏览器窗口进行定位。
                元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。    
                    (元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。)
    relative     生成相对定位的元素,相对于其正常位置进行定位。
                因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。    
                    (元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留)
    static         默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
                    (元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。)
    inherit     规定应该从父元素继承 position 属性的值。
16、Z-index设置元素的堆叠顺序。可被用于将在一个元素放置于另一元素之后。
17、CSS 浮动:
    浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
    由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
18、clear 属性规定元素的哪一侧不允许其他浮动元素。
19、使用 margin 属性来水平对齐:
    把左和右外边距设置为 auto,规定的是均等地分配可用的外边距。结果就是居中的元素。(提示:如果宽度是 100%,则对齐没有效果。)
20、a{display:block;}  解释:display:block - 把链接显示为块元素可使整个链接区域可点击(不仅仅是文本)。
21、水平导航栏:
    有两种创建水平导航栏的方法。使用行内或浮动列表项。
    两种方法都不错,但是如果您希望链接拥有相同的尺寸,就必须使用浮

您的资助是我最大的动力!
金额随意,欢迎来赏!

原文地址:https://www.cnblogs.com/Corphish/p/4354175.html