CSS 入门简介

时间 2019-12-07

标签 css 入门简介栏目 CSS 繁體版

原文原文链接

1、CSS简介及引用

一、CSS 概述

CSS汉译为层叠样式表，是用于控制网页样式。css

二、如何使用样式

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有如下三种方式来插入样式表：浏览器

1.外部样式表spa

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

内部样式表code

<head>
   <style type="text/css">
       body {background-color: red}
       p {margin-left: 20px}
   </style>
   </head>

内联样式文档

<p style="color: red; margin-left: 20px">
       This is a paragraph
   </p>

三、css样式表的优先级

内联样式表的优先级别最高
内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别高。input

2、CSS 基础语法

一、CSS 语法

h1 {color:red; font-size:14px;}

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
选择器：一般是须要改变样式的 HTML 元素。
声明：使用花括号来包围声明。it

提示：若是要定义不止一个声明，则须要用分号将每一个声明分开。
p {text-align:center; color:red;}

二、记得写引号

提示：若是值为若干单词，则要给值加引号：
p {font-family: "sans serif";}class

3、css选择器

一、标签选择器（h1）

h1 {color:red; font-size:14px;}

二、通配符选择器（*）

语法：*{属性：属性值;} , 含义就是全部元素；表示该样式适用全部网页元素基础

*{margin:0;color:#ff0;}

三、群组选择器（h1,h2,h3）

h1,h2,h3,h4,h5,h6 {
      color: green;
    }

四、派生选择器:

依据元素在其位置的上下文关系来定义样式:css选择器

后代选择器（空格）

li strong {
   color:red;
}

子元素选择器（>）

span > strong {color:blue;}

相邻兄弟选择器（+）

若是须要选择紧接在另外一个元素后的元素，并且两者有相同的父元素，可使用相邻兄弟选择器。
例如，若是要增长紧接在 h1 元素后出现的段落的上边距，能够这样写：
div h6 + p {margin-top:50px;}

<div>
    <h6>This is a heading.</h6>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>    
</div>

id选择器（#）

为标有特定 id 的 HTML 元素指定特定的样式 , id属性只能在每一个 HTML 文档中出现一次.例如：身份证号码。
#redColor{background-color: red;}
#greenColor{background-color: green;}

<div id="redColor">我有一个id，为redColor</div>
<div id="greenColor">我有一个id，为greenColor</div>

命名规范：

1）只容许出现字母（大小写都可，严格区分） 、下划线、数字。也就是说，id=”laoHe”和 id=”laohe”不冲突。
2) 只容许以字母开头。
3) 命名没有长度限制，能够是 1 个字母，也能够是不少个。不过不建议太长。
4) 不容许出现标签名（不是硬性规定，是有工做经验的表现）
六、类选择器（ . ）
类选择器以一个点号显示：
.goCenter{
    text-align: center;
    background-color: gray;
}
div, p, h2, 元素都有 goCenter 类。这意味着二者都将遵照 ".goCenter " 选择器中的规则。
<div class="goCenter">我和兄弟有一个共同的class，为goCenter</div>
<p class="goCenter">我和兄弟有一个共同的class，为goCenter</p>
<h2 class="goCenter">我和兄弟有一个共同的class，为goCenter</h2>
注意：类名的第一个字符不能使用数字！

伪类选择器（ : ）

CSS 伪类用于向某些选择器添加特殊的效果。伪类，状态是动态变化的，当一个元素达到一个特定状态时，它可能获得一个样式，当状态改变时，又失去这个样式。例如，含羞草。
1）、focus
选择得到焦点的 input 元素。
2）:link，:visited，:hover，:active
连接的不一样状态均可以不一样的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
a:link {color: #FF0000}       /* 未访问的连接 */
a:visited {color: #00FF00}       /* 已访问的连接 */
a:hover {color: #FF00FF}       /* 鼠标移动到连接上 */
a:active {color: #0000FF}    /* 选定的连接 */
注意：a:hover 必须被置于 a:link 和 a:visited 以后，才是有效的。
注意：a:active 必须被置于 a:hover 以后，才是有效的。

伪元素选择器（ : ）

语法：选择器::伪元素 / 选择器:伪元素
伪元素是控制内容，用于对文档的一部分（伪）元素定义样式
CSS2.1首次定义了单冒号开头的伪元素,为了将伪元素与伪类进行严格区分，CSS3从新定义了双冒号开头的伪元素。
1）:first-line、:first-letter
用于向文本的首行,首字母设置特殊样式,该伪元素只能应用于块级元素。
<p id="article">
细雨昵喃，打湿几处新裳。最是无奈飞燕，春去冬不归，似人生浮雨，飘飘荡荡，有似那点水浮萍，漂泊无根。曾几什么时候也有过“细雨湿衣看不见，闲花落地听无声”的清闲，也有过“竹杖芒鞋轻胜马，一蓑烟雨任生平”的潇洒。人生老是无奈之事太多，牵绊，执念，总会左右着咱们凉薄的人生，经常回想，有一天咱们是否能如水通常，清澈纯净，方圆随意，如白云同样自由自在。
</p>

/*伪元素  之:first-line*/
#article:first-line{
    color: red;
}

/*伪元素  之:first-letter*/
#article:first-letter{
    color: blue;
}

2）:first-child 
选择元素的第一个子元素
p:first-child{
    font-size: 30px;
}
li:first-child{
    font-size: 30px;
}
<p>文中第一个P标签</p>
<ul>
    <li>文中第一个li标签</li>
    <li>文中第二个li标签</li>
    <li>文中第三个li标签</li>
</ul>
<p>文中第二个P标签</p>

3）:before
定义某一个元素第一个（虚构的）子元素的内容，一般会附带content属性。
语法：选择器:before { content: value; }

4）:after
定义某一元素最后一个（虚构的）子元素的内容，一般会附带content属性。
语法：选择器:after { content: value; }
5）content
说明：content属性一般与伪元素选择器 :before 或 :after 一并使用，主要用于为该伪元素生成内容。
语法：{ content: value; }

4、CSS的注释

CSS的注释格式： / 注释内容 /

1. html5快速入门（二）—— CSS简介
2. Lucene入门简介
3. JQuery快速入门-简介
4. Matplotlib入门简介
5. Netty入门简介
6. CRF简介入门
7. Redis入门简介
8. word2vec入门简介
9. Kotlin入门简介
10. Storm入门简介
更多相关文章...
• Memcached入门教程 - NoSQL教程
• Thymeleaf简介 - Thymeleaf 教程
• Java Agent入门实战（一）-Instrumentation介绍与使用
• YAML 入门教程