2.CSS

什么是 CSS?

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素，如颜色，大小，粗细，字体，边框，布局编排等等

CSS样式有哪几种?具体是怎样表现的？

内联样式（inline-style），位于 HTML元素标签内部。
内部样式表（internal style sheet），位于 <head> 标签内部。
外部样式表（External style sheet），以.css文件形式单独存在。

<--!内联样式-->
<p style="color:sienna;margin-left:20px">这是一个段落。</p>


<--!内部样式表-->
<style>    
  选择器 {属性名称: 属性值;}    
  h2 {color: red;}    
</style>


<--!外部样式表，HTML引用声明-->
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

/* .css文件 */
h {color:sienna;}           
p {margin-left:20px;}            
body {background-image:url(/images/back40.gif);}

CSS样式优先级别

内联样式（inline-style）> 内部样式表（internal style sheet）> 外部样式表（External style sheet）> 浏览器默认样式
同一样式同一选择器的重复渲染，后者会覆盖前者
同一样式不同选择器，Id选择器的优先级大于class选择器
如果样式被后者覆盖，如还想使用初始样式。可以加上！important强制使用当前样式

<style>
body {
color: green;
}
<--!如下样式会覆盖上面body样式-->
.pink-text{
    color:pink; 
}
</style>
<body>
    <h1 class="pink-text">Hello World!</h1>
</body>



.pink-text {
color: pink;
}
<--!同样下面的会覆盖前面的，而不会取决class在元素中的先后-->
.blue-text{
    color:blue;   
}
</style>
<body>
<h1 class="blue-text pink-text ">Hello World!</h1>
</body>



<--!  id优先级>class优先级 -->
#orange-text{
    color:orange;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
</style>
<body>
<h1 class="pink-text blue-text" id='orange-text'>Hello World!</h1>
</body>



#orange-text {
color: orange ;
}
<--!尚方宝剑在手，此时又是他生效了哦-->
.pink-text {
color: pink !important;
}
.blue-text {
color: blue;
}
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>

CSS选择器

1.标签选择器

p  选择所有<p>元素
{ 
    background-color:yellow;
}


h1,p  选择所有<h1>元素和<p>元素
{ 
background-color:yellow;
}

div p  选择<div>元素内的所有<p>元素
{ 
background-color:yellow;
}

div>p   选择所有父级是 <div> 元素的 <p> 元素
{ 
background-color:yellow;
}

div+p   选择所有紧接着<div>元素之后的<p>元素
{ 
background-color:yellow;
}

2.id选择器

#firstname  选择所有id="firstname"的元素
{ 
background-color:yellow;
}
<--! 注意同一个ID只能在一个HTML文件中出现一次，可联想为ID card  -->

3.class选择器

.intro  选择所有class="intro"的元素
{ 
background-color:yellow;
}

<--! 注意同一个class在一个HTML文件中可多次使用 -->

4.属性选择器

a[target]      选择所有带有target属性元素
{ 
background-color:yellow;
}


a[target=_blank]  选择所有使用target="-blank"的元素
{ 
background-color:yellow;
}


[title~=flower]  选择标题属性包含单词"flower"的所有元素
{ 
background-color:yellow;
}

[lang|=en]  选择一个lang属性的起始值="EN"的所有元素
{ 
background-color:yellow;
}

5.伪元素和伪类

伪元素：控制的内容和元素是没有差别的，但是它本身只是基于元素的抽象，并不存在于文档中，所以称为伪元素。如first-letter，first-line等。

伪类：由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。如anchor，first-child等。

<--! 伪元素使用方法 -->
selector:pseudo-element {property:value;}

selector.class:pseudo-element {property:value;}

p:first-letter 
{
color:#ff0000;
font-size:xx-large;
}

<--! 伪类使用方法 -->

selector:pseudo-class {property:value;}

selector.class:pseudo-class {property:value;}

<html> 
<head> 
<style> 
<--! p标签第一行变蓝 -->
p:first-child 
{ 
color:blue; 
} 
</style> 
</head> 

<body> 
<p>I am a strong man.</p>  
<p>I am a strong man.</p> 
</body> 
</html>

CSS 盒子模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：

Margin（外边距） - 清除边框区域。Margin没有背景颜色，它是完全透明
Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响
Content（内容） - 盒子的内容，显示文本和图像

重要: 当您指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。

下面的例子中的元素的总宽度为300px：

width:250px;        
padding:10px;        
border:5px solid gray;        
margin:10px;

CSS Positioning(定位)

CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非事先设定position属性。他们也有不同的工作方式，这取决于定位方法.

有四种不同的定位方法。

1.Static 定位

HTML元素的默认值，即没有定位，元素出现在正常的流中。

静态定位的元素不会受到top, bottom, left, right影响。

2.Fixed 定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：

p.pos_fixed 
{ 
position:fixed; 
top:30px; 
right:5px; 
}

3.Relative 定位

相对定位元素的定位是相对其正常位置。可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。

h2.pos_left 
{ 
position:relative; 
left:-20px; 
} 
h2.pos_right 
{ 
position:relative; 
left:20px; 
}

4.Absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:

h2 
{ 
position:absolute; 
left:100px; 
top:150px; 
}

Absolutely定位使元素的位置与文档流无关，因此不占据空间。Absolutely定位的元素和其他元素重叠。

5.重叠的元素

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素。z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

一个元素可以有正数或负数的堆叠顺序：

img 
{ 
position:absolute; 
left:0px; 
top:0px; 
z-index:-1; 
}

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

CSS Float(浮动)

CSS float 属性定义元素在哪个方向浮动，浮动元素会生成一个块级框，直到该块级框的外边缘碰到包含框或者其他的浮动框为止。默认块级标签会独占一行，用float可以让块级标签浮动在一起。

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。

<--! 右浮动 -->
img 
{ 
float:right; 
}

<--! 并列浮动 -->
.thumbnail 
{ 
float:left; 
width:110px; 
height:90px; 
margin:5px; 
}

<--! 清除浮动 -->
.text_line 
{ 
clear:both; 
}

最后，关于伪类和伪元素的区别，可以参考如下链接：

1.CSS3伪类和伪元素的特性和区别：https://www.cnblogs.com/ihardcoder/p/5294927.html

2.详解 CSS 属性 - 伪类和伪元素的区别：https://segmentfault.com/a/1190000000484493

posted @ 2018-09-11 00:12 Robin_D 阅读(270) 评论(0) 编辑收藏举报

刷新页面返回顶部