首页 > 其他分享> 文章详细

CSS学习小结

2021-06-20 16:33:25 阅读：111 来源： 互联网

标签：color 元素 height 学习样式小结选择器 CSS 属性

CSS学习小结

一什么是css
二 css选择器
三 CSS如何生效
四颜色、尺寸、对齐
五盒子模型
- 盒子模型概念
六边框与边距
- 叠加外边距
七定位
八浮动
九不透明度
十伪类和伪元素
- 伪类
- 伪元素

一什么是css

CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。

网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。

二 css选择器

css选择器分为

1.群组选择器  如：p, body, img, div{}

2.兄弟选择器  如：p + p { color:#f00; }

3.属性选择器  如： p[title] { color:#f00; }

4.包含（后代）选择器  如：body ul li{}

5.子元素选择器 如：div > p{}

6.ID选择器  如：#myDiv{}

7.类选择器  如：.class1{}

8.伪元素选择器  如：E:first-line，E:before

9.伪类选择器  如：E:first-child ，E:visited，E:focus，E:enabled

10.标签选择器  如：p { font-size:1em; }

子选择器和后代选择器的区别：

后代选择器的写法就是把外层的标记写在前面，内层的标记写在后面，之间用空格分隔。
子选择器只对直接后代有影响的选择器，而对“孙子后代”以及多层后代不产生作用。

三 CSS如何生效

1.行内样式

行内样式是写在HTML标签的style属性里的，比如：

  <p style="font-size: 12px;font-weight: 200;color: #333333">Hello Everyone!</p>

行内样式会覆盖嵌入样式和链接样式

2.嵌入样式

嵌入的css样式是放在HTML文档的head元素中的，这点想必大家都知道，这里就不赘述了。

3.链接样式

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css" type="text/css"/>
</head>

链接样式的作用范围可以是整个网站。只要使用标签把样式表链接到每个页面，相应的页面就可以使用其中的样式，除了link方法外，还可以使用@import指令

@import  url(css/style.css);

@import指令必须出现在样式表中其他样式之前，否则该链接的文件不会被加载

四颜色、尺寸、对齐

1.颜色

我们可以采用颜色名称也可以使用颜色RGB16进制值，来设定前景或背景的颜色。如：

<!-- 颜色名称 -->
<h3 style="background-color:Tomato;">Tomato</h3>
<h3 style="background-color:Orange;">Orange</h3>
<h3 style="background-color:DodgerBlue;">DodgerBlue</h3>
<h3 style="background-color:MediumSeaGreen;">MediumSeaGreen</h3>
<h3 style="background-color:Gray;">Gray</h3>
<h3 style="background-color:SlateBlue;">SlateBlue</h3>
<h3 style="background-color:Violet;">Violet</h3>
<h3 style="background-color:LightGray;">LightGray</h3>
<hr>
<!-- 颜色值，3个字节分别代表RGB（Red，Green，Blue）的0～255的值 -->
<h3 style="background-color:#ff0000;">#ff0000</h3>
<h3 style="background-color:#0000ff;">#0000ff</h3>
<h3 style="background-color:#3cb371;">#3cb371</h3>
<h3 style="background-color:#ee82ee;">#ee82ee</h3>
<h3 style="background-color:#ffa500;">#ffa500</h3>
<h3 style="background-color:#6a5acd;">#6a5acd</h3>
<!-- 文本颜色 -->
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
<p style="color:MediumSeaGreen;">Ad facilis est ducimus rem consectetur, corporis omnis, eveniet esse dolor molestiae numquam odio corrupti, sed obcaecati praesentium accusamus? Tempora, dolor a?</p>

2.尺寸

我们可以用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等。
新建如下 HTML 文件：

<html>
  <head>
    <link rel="stylesheet" href="./mycss.css">
  </head>
  <body>
    <div class="example-1">
      这个元素高 200 pixels，占据全部宽度
    </div>
    <div class="example-2">
      这个元素宽200像素,高300像素
    </div>
  </body>
</html>

再建对应的 CSS 文件如下：

.example-1 {
  width: 100%;
  height: 200px;
  background-color: powderblue;
  text-align: center;
}
.example-2 {
  height: 100px;
  width: 500px;
  background-color: rgb(73, 138, 60);
  text-align: right;
}

3.对齐

对于元素中的文本，我们可以简单的设置text-align属性为left, center, right即可（显然缺省的是左对齐），上例中已有相关的应用。

五盒子模型

盒子模型概念

假设框的每个边上有10个像素的外边距和5个像素的内边距。如果希望这个元素框在页面内只占100个像素，就需要将内容的宽度设置为70像素，请看下图:
在这里插入图片描述
盒子在页面中所占的宽度
是由左边距+左边框+左填充+内容宽度+右填充+右边框+右边距组成
盒子在页面中所占的高度
是由上边距+上边框+上填充+内容高度+下填充+下边框+下边距组成

在CSS中，width和height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
给ul下的li设置宽度，那么他们将平均掉它们所占容器的宽度。div >ul> li> a标签所占宽度和高度：
在这里插入图片描述
当你为body元素指定div时，每个div默认的宽为浏览器的100%，高度在每个浏览器的解析都是不一样的，比如在火狐下是131px，在chrome下则是142px

六边框与边距

每一个元素都会在页面上生成一个盒子，因此，HTML页面实际上就上由一堆盒子组成的。默认情况下，每个盒子的边框是不可见的，背景也是透明的。

边框（border）有如下3个相关属性：

 1. 宽度（border-width）：可以使用`thin、medium`和`thick`等文本值，也可以使用除百分比和负值之外的任何绝对值
 2. 样式（border-style）：有none、hidden、dotted、dashed、double、groove、ridge、inset和outset等
 3. 颜色（border-color）：可以使用任意颜色值，包括RGB、HSL、十六进制颜色值和颜色关键字

叠加外边距

垂直方向上的外边距会叠加，假设有3个段落，前后相接，而且都应用以下规则：

<style type="text/css">
        p{
            color: black;
            background: #ccc;
            margin-top: 50px;
            margin-bottom: 30px;
            height: 50px;
            border: 1px solid red;
        }
</style>

第一段的下外边距与第二段的上外边距相邻，你可能认为它们之间的外边距是80px，但实际的间距却是50px。像这样的上下外边距相遇时，它们就会相互重叠，直至一个外边距碰到另一个元素的边框。因此，在这里，第二段较宽的上外边距就会碰到第一段的边框。也就是说，较宽的外边距决定两个元素最终离多远。这个过程就是外边距叠加。

七定位

position属性用于对元素进行定位。该属性有以下一些值：

static 静态
relative 相对
fixed 固定
absolute 绝对

设置了元素的position属性后，我们才能使用top, bottom, left, right属性，否则定位无效。

static
设置为静态定位position: static;，这是元素的默认定位方式，也即你设置与否，元素都将按正常的页面布局进行。
即：按照元素在 HTML出现的先后顺序从上到下，从左到右进行元素的安排。

relative
设置为相对定位position: relative;，这将把元素相对于他的静态（正常）位置进行偏移
试试如下的代码：

<!-- HTML -->
<div class="example-relative">我偏移了正常显示的位置。去掉我的样式对比看看？</div>
<!-- CSS -->
.example-relative {
  position: relative;
  left: 60px;
  top: 40px;
  background-color: rgb(173, 241, 241);
}

fixed
设置为固定定位position: fixed;，这将使得元素固定不动（即使你上下左右拖动浏览器的滚动条）。
此时元素固定的位置仍由top, bottom, left, right属性确定，但相对的是视口（viewport，就是浏览器的屏幕可见区域）
如下的代码将会在浏览器右下角固定放置一个按钮元素：

<!-- HTML -->
<div class="broad">占位区域。请将浏览器窗口改变大小，看看右下角的按钮发生了什么？</div>
<div class="example-fixed">这个按钮是固定的</div>
<!-- CSS -->
.example-fixed {
  position: fixed;
  bottom: 40px;
  right: 10px;
  padding: 6px 24px;
  border-radius: 4px;
  color: #fff;
  background-color: #9d0f0f;
  cursor: pointer;
  box-shadow: 0 3px 3px 0 rgba(0,0,0,0.3), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}
.broad {
  height: 5000px;
  width: 5000px;
  padding: 20px;
  background-color: darkkhaki;
}

八浮动

对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。

float: left的元素会尽量靠近父元素的左上角

float: right的元素会尽量靠近父元素的右上角

/*======万能Float闭合======*/
.clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clear {display: inline-block;} /* for IE/Mac */
.clear {
    zoom: 1; /* triggers hasLayout */
    display: block; /* resets display for IE/Win */
} 
/*======万能Float闭合3======*/
.clear{
 height:0px;
 clear:both;
 font-size:0px;
 line-height:0px;
 zoom: 1;
}

浮动框可以左右移动，直到它的外边缘碰到包含框或另一个浮动框的边缘。因为浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

九不透明度

元素透明度时常是个恼人的问题，下面这种方式可以实现所有浏览器下的透明度设置：

.transparent {
  zoom: 1;
  filter: alpha(opacity=50);
  opacity: 0.5;
}

Zoom属性是IE浏览器的专有属性，Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些小作用，比如触发IE的hasLayout属性，清除浮动、清除margin的重叠等。

当一个元素的 hasLayout属性值为true时，我们说这个元素有一个布局（layout）

十伪类和伪元素

伪类

a:link {color: black}     /* 未访问的链接 */
a:visited {color: blue}  /* 已访问的链接 */
a:hover {color: red}    /* 当有鼠标悬停在链接上 */
a:active {color: purple}   /* 被选择的链接 */

为了产生预期的效果，在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后！a:active 必须位于 a:hover 之后！！

伪元素

“伪元素”，顾名思义。它创建了一个虚假的元素，并插入到目标元素内容之前或之后。
伪元素如果没有设置“content”属性，伪元素是无用的。

插入的元素默认情况下是内联元素，如果你要为其设置宽高等属性，你需要将他定义为块级元素

#element:before{
    content : "";
    display : 'block'
    height : 1000px;
    width : 1000px;
}

注入的内容将是有关联的目标元素的子元素，但它会被置于这个元素的任何内容的“前”或“后”。

标签：color,元素,height,学习,样式,小结,选择器,CSS,属性
来源： https://blog.csdn.net/qq_45937732/article/details/118070490

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS学习小结