CSS 入门简介

一、CSS简介及引用

1、CSS 概述

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

2、如何使用样式

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

1.外部样式表

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
  1. 内部样式表

       <head>
       <style type="text/css">
           body {background-color: red}
           p {margin-left: 20px}
       </style>
       </head>
    
  2. 内联样式

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

3、css样式表的优先级

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

二、CSS 基础语法

1、CSS 语法

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

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

提示:如果要定义不止一个声明,则需要用分号将每个声明分开。
p {text-align:center; color:red;}    

2、记得写引号

提示:如果值为若干单词,则要给值加引号:
p {font-family: “sans serif”;}

三、css选择器

1、标签选择器(h1)

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

2、通配符选择器(*)

语法:*{属性:属性值;} , 含义就是所有元素;表示该样式适用所有网页元素

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

3、群组选择器(h1,h2,h3)

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

4、派生选择器:

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

  • 后代选择器 (空格 )
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) 不允许出现标签名(不是硬性规定,是有工作经验的表现)
6、类选择器( . )
类选择器以一个点号显示:
.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; }

四、CSS的注释

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

    原文作者:Twait
    原文地址: https://segmentfault.com/a/1190000017717770
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞