2.CSS

时间 2019-12-11

标签 2.css css 栏目 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等。css

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

<--! 伪元素使用方法 -->
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元素，它包括：边距，边框，填充，和实际内容。segmentfault

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

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

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

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

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

CSS Positioning(定位)

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

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

有四种不一样的定位方法。url

1.Static 定位

HTML元素的默认值，即没有定位，元素出如今正常的流中。spa

静态定位的元素不会受到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伪类和伪元素的特性和区别：http://www.javashuo.com/article/p-hpvzweoj-g.html

2.详解 CSS 属性 - 伪类和伪元素的区别：http://www.javashuo.com/article/p-diaxzxtr-gu.html

1. css(2)
2. CSS-2
3. CSS - 2
4. css 2
5. CSS基础知识(2 css)
6. css-2(css选择器)
7. 重学CSS（2）
8. 2、$CSS部分
9. css学习 -- 2
10. 2九、CSS
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• 使用阿里云OSS+CDN部署前端页面与加速静态资源
• 适用于PHP初学者的学习线路和建议