学习【CSS权威指南】（一）

最新推荐文章于 2022-09-19 16:29:44 发布

why_su

最新推荐文章于 2022-09-19 16:29:44 发布

阅读量335

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/why_su/article/details/84313070

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

不要使用 <font>

行内元素内不能包含块级元素

<em><p>这里的p标签是不能在这里的</p></em>
<p><em>这样才正确</em></p>

要在<head>标签中引用

<link rel="stylesheet" type="text/css" href="my.css"/>

也可以在 <style> 中使用 @import

<style type="text/css">
   @import url("my.css")
</style>

通配符，与任意元素匹配

* {
  color: red;
}

<div class="warning urgent"> 可以使用

.urgent {
  font-style: italic; /*斜体*/
} 
.warning {
  color: red;
}
.urgent.warning {
  font-size: 20px; /**/
}
.warning.urgent {
  font-size: 30px; /*匹配 class 同时含有 warning urgent*/
}
/* .urgent.warning 和 .warning.urgent 是一样的，没有先后之分*/

属性选择:

*[title] { color: silver; } 匹配所有含有 title 属性的标签

img[alt] { border: 3px solid red; } 匹配所有带 alt 属性的 img标签。例如 <img src="1.jpg" alt=""/> 就适用，但<img src="1.jpg"/>没有 alt属性就不匹配

a[href][title] { font-weight: bold; } 匹配同时含有 href ,title 属性的 a 标签

居然还可以选择某个具体的属性值： a[href="http://www.baidu.com"] { }

使用这种方法，必须保证属性值完全匹配，例如：

<p class="urgent warning"> </p> 就必须使用 p[class="urgent warning"] , 只使用 p[class="urgent"] 是不行的

那么如何匹配含有属性warnig 的？可以使用之前的点号 p.warning { font-size: 20px; }

也可以使用 波浪号 p[class~="warning"] { font-size: 20px; } 表示 class属性含有 warnig就行，不必完全匹配

p[class="warning"] { font-size: 20px; } 表示 class属性只能含有一个 warnig 值

后代选择器，使用空格

   <table>
       <thead>
         <tr>
             <th>姓名</th>
             <th>年龄</th>
         </tr>
       </thead>
       <tbody>
         <tr>
             <td>12</td>
             <td>why</td>
         </tr>
       </tbody>
   </table>

使用   table thead tr th {
           color: red;  
       }  

之前的使用 逗号 是匹配所有  h1,h2,h3 {
                     color: yellow;  
                   }

选择子元素 h1 > strong { color: red; } /*这个规则会匹配 h1 下的 strong 元素（必须是直接的子元素，例如 <h1><strong></strong></h1>是可以的，但<h1><em><strong></strong></em></h1> 是不会匹配的）*/

   h1 > strong {
      color: red;   
   }
   <h1>
       <strong>第一个</strong>             <!--红色--> 
       <strong>第二个</strong>             <!--红色--> 
       <strong>第三个</strong>             <!--红色--> 
       <em><strong>第四个</strong></em>    <!--不影响--> 
   </h1>

   h1 strong {
      color: red;   
   }
   <h1>
       <strong>第一个</strong>             <!--红色--> 
       <strong>第二个</strong>             <!--红色--> 
       <strong>第三个</strong>             <!--红色--> 
       <em><strong>第四个</strong></em>    <!--红色--> 
   </h1>

选择相邻兄弟元素 li + li { color:red;} /*例如 <li>1</li> <li>2</li> <li>3</li> 则只匹配第2，3个，第1个不匹配*/

伪类元素，使用冒号

对于锚 <a></a> 未访问的超链接为蓝色，已访问的超链接为红色，使用：

a:link {color:blue;}
a:visited {color:red;}

这里不用 a {color:blue;} 而是使用 a:link {color:blue;} 则只匹配有href属性的

顺序是 link - visited - focus - hover - active

p:first-child { text-transform: uppercase; } 注意：这里是指作为某元素第一个子元素的所有p元素，

而不是 p的第一个子元素。 :first-child 是指p

*:lang(fr) { font-style: italic; } 指所有的法语元素变成斜体

综合伪类，例如 a:visited:hover {color: red;} 表示鼠标停留在已访问的链接上时，显示红色

p:first-letter {text-transform: uppercase; } p标签的首字母大写

p:first-line {color: purple;} p标签所显示的文本的第一行

p:before { content: '==前缀=='; } 在 p 元素前插入

p:after { content: '==后缀=='; } 在 p 元素后插入

同样权重的，加了 !important 会胜出

h1 strong {
  color: red !important;  /*胜出*/
}
h1 strong {
  color: black;
}

颜色：值位于 0 ~ 255之间， 0% ~ 100% 之间

color: rgb(0,0,0)   /*黑色*/    
    等价于  color: rgb(0%,0%,0%); 
    等价于  color: #000000;
color: rgb(255,255,255)   /*白色*/  
    等价于  color: rgb(100%,100%,100%);
    等价于  color: #FFFFFF;

有趣的现象：如果三个值都一样，灰度改变：

   <h1>          h1 {  color: rgb(0%,0%,0%);  }     </h1>
   <h2>          h2 {  color: rgb(20%,20%,20%);  }  </h2>
   <h3>          h3 {  color: rgb(40%,40%,40%);  }  </h3>
   <h4>          h4 {  color: rgb(60%,60%,60%);  }  </h4>
   <h5>          h5 {  color: rgb(80%,80%,80%);  }  </h5>

三个值都一样就成了灰度变浅，如果改变某个值，则就变颜色

长度， 1em 表示 14像素

background: url("../1.jpg")

text-decoration: none; 清除文本样式

inherit 表示继承父类的属性，大多数属性本身会自然的继承，所以不用指定，但有些情况还是需要指定的，例如：

#toolbar {
  background: black;
  color: white;
}

<div id="toolbar">
  <a href="1.html">链接一</a> | <a href="1.html">链接二</a>
</div>

这里的 链接a 还是会按照浏览器的首选项来设置样式，需要设定inherit

#toolbar a {
  color: inherit;
}

设置字体：

body {
   font-family: sans-serif;
}

可以列举多个具体的字体，如果在电脑上都找不到这些字体的话，就使用默认的,名字中间有空格的用引号圈起来
body {
   font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, serif; }
}

font-weight: normal 等于 font-weight: 400 ,

font-weight: bold 等于 font-weight: 700 , 如果设置成 font-weight: border; 必须确定从父元素继承的font-weight值。

font-variant: small-caps; 不同大小的大写字母

font 属性：前三个是 font-style font-weight font-variant 随意排序，如果未normal 可以省略。这三个可以省略。

后两个的顺序就必须是 font-size 和 font-family. 这两个不能省略。例如。

font: itaiic bold small-caps 30px Verdana, Helvetica, Arial, sans-serif;

文本缩进，适用于块级元素

文本对齐，也是只适用于块级元素

text-align: justify; 调整单词和字母间的间隔，使各行的长度恰好相等。

line-height： normal; 通常都是字体大小 font-size 的 1.2倍。

<div style="line-height: 150%;font-size: 16px;">
  <p style="font-size: 30px;"></p>
</div>

如果父元素的 line-height 是 150% , 则子元素从父元素那继承来的 line-height值是 16px * 150% = 24px;

如果父元素的 line-height 是 1.5em , 则子元素从父元素那继承来的 line-height值是 16px * 1.5 = 24px;

注意，如果父元素的 line-height 是 1.5 , 则子元素是根据自己的 font-size 来计算 line-height 30px * 1.5 = 45px;

垂直对齐文本：

vertical-align: baseline; 基线对齐 vertical-align: sub; 下标 vertical-align: super; 上标

<p>We can either 
   <sup style="vertical-align: 100%;">sup </sup> 
   or 
   <sub style="vertical-align: -100%;">sub</sub>
</p>

使用 vertical-align: 100%; 正百分数会把基线升高，也就会使元素升高。vertical-align: -100%; 负百分数会把基线降低，会使元素降低。

vertical-align: 5px; 它把一个元素升高或降低指定的距离。

word-spacing: 0.5em; word-spacing: -0.5em; 是字符串之间的间隔

letter-spacing: 0.5em; 是字母之间的间隔

text-transform: capitalize; 每隔单词的首字母大写

text-decoration: underline; 下划线 overline 在头顶的线 line-through 在中间的线（删除线），和<s></s> 效果是一样的

可以支持多个效果 text-decoration: underline overline line-through;

blink 闪烁效果，已不支持

如果想去掉 <a></a> 的默认下划线样式，可以使用 a { text-decoration: none; }

注意：

<p style="text-decoration: underline;">
  asd cfd sDSA DASd <strong style="text-decoration: none;">Strong</strong> das1
</p>

这里看起来 <strong> 有下划线，但它的 text-decoration为none，这个下划线是父元素 <p>的，没办法去掉

文本阴影：

阴影的字体大小和原来的是一样的

text-shadow: 5px 5px 5px green; 阴影水平向右5px , 垂直向下5px , 模糊度 5px , 颜色green. 如果为负数表示相反方向。

white-spaces: normal; 丢掉多余的空白符，回车会转为空白符，一行中多个空格会转为一个空格。

pre 保留空白符，只有遇到换行符才会换行（不会自动换行）

pre-wrap 保留空白符，会自动换行

pre-line 多个空白符合并成一个，会自动换行

no-wrap 多个空白符合并成一个, 不会自动换行，除非遇到 <br/> 才会换行

这个单看名字还真记不住。。

direction: ltr; 从左到右， rtl 从右到左，

包含块 <div> <p></p> <a/> </div> 其中 p标签的包含块就是 div

正常流 从左到右，从上到下

替换元素 例如 img 元素，指向一个图像文件，这个文件将插入到文档流中该img所占的位置

非替换元素

根元素 <html></html>

块级元素：

width 影响的是 内容区的宽度，而不是整个可见框，如果还指定内边距、边框或外边距，这些都会增加宽度值。

正常流中块级元素框的水平部分总和就等于父元素的width

margin-left, border-left, padding-left, width, padding-right, border-right, margin-right

这7个属性只有内容的width, 左右外边距 margin-left, margin-right 可以设置为auto, 其它属性必须设置特定的值，或者默认宽度为0，如果设置为auto ，会确定设置为auto的属性的长度，从而使元素框的宽度等于父元素的width

    <div style="width: 400px;"> 
       <!--父元素内容的宽度是400px, 这里会把margin-right的宽度设为auto,计算过后变为200px-->
        <p style="width:100px;margin-left: 100px;margin-right: 100px;">段落段落段落段落</p>
    </div>

    <div style="width: 400px;"> 
       <!--这里width会计算出占300px, margin-left为0-->
        <p style="width:auto;margin-left: auto;margin-right: 100px;">段落段落段落段落</p>
    </div>

    <div style="width: 400px;"> 
       <!--3个都为auto,左右外边距都会默认为0，这里width计算为400px-->
        <p style="width:auto;margin-left: auto;margin-right: auto;">段落段落段落段落</p>
    </div>

有一个例外: 替换元素的width如果为auto，则元素的宽度是内容的固有宽度，例如<img src="1.png">

只有外边距可以为负数，内边距不能为负数，如果为负数的话直接忽略。

margin-right或者margin-bottom是负值：它不会移动该元素(该元素不变化)，但会使该元素后面的元素往前移动。也就是说，如果margin-bottom为负值，那么该元素下面的元素会网上移动；如果margin-right为负值，那么该元素右边的元素会往左移动，从而覆盖该元素。

可以这么理解： margin 为正值，是将两个元素互相推开，为负值，则是将两个元素拉近

margin-top,border-top,padding-top,height,padding-bottom,border-bottom,margin-bottom 这7个属性的值必须等于元素包含快的height

border-style: solid dashed none dashed; 是按照顺时针方向设置 top-right-bottom-left，可以单独设置：

也可以单独设置：

单独设置border-width: 2px; 没有任何效果，因为border-style为none，需要设置 border-style: solid; 也可以增加颜色 border-style: red; 可以将三者写在一块： border: 1px solid red; border: thick solid silver

前景色 color: red;
背景色 background-color: red; 其默认值是 background-color: transparent; 透明的

需要添加 url: 其中 url() 中间无需引号

background-image: url(/Image/1.png);

repeat 在水平竖直方向都平铺 repeat-x 在水平 repeat-y 在竖直方向平铺 no-repeat 不平铺

background-position: top left; 左上角

background-attachment: scroll; 背景跟随着文档滚动而滚动， fixed 背景不滚动，相对于可视区是固定的。

background: white url(1.png) repeat fixed top left;

第10章浮动和定位

浮动元素：会以某种方式从文档的正常流中删除。一个元素浮动时，其它内容会“环绕”该元素。

并且，浮动元素周围的外边距不会合并

浮动元素会生成一个块级框，不论这个元素本身是什么，它会像块级元素一样摆放和表现，这里没必要加display:block;

浮动元素必须准守的规则：

浮动元素的左右外边界不能超过其 包含快 的左右内边界
浮动元素的左右外边界，必须是源文档之前出现的左右浮动元素的左右外边界。这条规则可以防止浮动元素彼此“覆盖”。
如果一行放不下，会另起一行。例如 body宽500px,第一个图像float:left; 第二个图像fload: right; 图片宽度300px; 但它们之间不会重叠那100像素，它会要求第二个图像向下浮动。换行。

其它规则不知道在讲啥子东西。。大意就是不能超越 包含快

但如果外边距为负数的话，会看起来像超出了父元素的界限。。不想去深究这个奇葩问题，知道就好

清除 h1 { clear: left; } 表示“确保h3的左边没有浮动元素”

h2 {clear: both; } 防止 h2左右两边出现浮素