CSS概述

CSS简介
CSS语法规范
CSS选择器
- 基础选择器
- 复合选择器
CSS字体属性
CSS文本属性
CSS引入方式

CSS简介

CSS指层叠样式表 (Cascading Style Sheets)。CSS主要用于设置HTML页面中的文本内容、图像的外形以及版面的布局和外观显示样式。CSS可以美化HTML、让HTML更漂亮、让页面布局更简单。CSS最大价值是让HTML专注做结构呈现，样式交给CSS，即结构与样式相分离。

CSS语法规范

CSS规则由两个主要的部分构成：选择器以及一条或多条声明。

选择器 { 一条或多条声明 }

选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式。
属性和属性值以键值对的形式出现，利用英文":"来进行分隔，且每一对键值对结尾要加上";"。例如 color:red;

CSS选择器

选择器（选择符）就是根据不同需求把不同的标签选出来。选择器分为基础选择器和复合选择器。

基础选择器

标签选择器:
所谓标签选择器就是将HTML标签名称作为选择器，按照标签名称进行分类，为页面中某一类标签指定统一的CSS样式。例如p{ color :green;}
类选择器:
类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点"."表示。我们可以给一个标签指定多个类名，多个类名之间用空格隔开。使用多类名有利于修改CSS代码，且更加规整。


//CSS中定义
.类名{
    属性1:属性值1;
    属性2:属性值2;
    ....
}

//HTML中使用
<p class ="类名1 类名2 ..."> ... </p>

id选择器:
id选择器与类选择器类似，但是一个id只能被调用一次。在CSS中，id选择器以"#"定义。类选择器类似人名，而id选择器类似身份证号。id选择器一般用于页面唯一性的元素。

//CSS中定义
#ID{
    属性1:属性值1;
    属性2:属性值2;
    ....
}

//HTML中使用
<p id="ID"> ... </p>

通配符选择器:
在CSS中，通配符选择器使用"*"定义，它表示选取页面中的所有元素（标签）。通配符选择器不需要调用，自动给所有元素使用。一般只有特殊情况下才会使用。

* {
    属性1:属性值1;
    属性2:属性值2;
    ....
}

复合选择器

后代选择器:
后代选择器又称为包含选择器，可以选择作为某元素后代的元素。在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。例如 dev p 选择器可以解释为选取作为dev元素后代的所有p元素,只要这个p元素是dev元素的后代即可(儿子、孙子....)。

<html>
<head>
<style type="text/css">
ul em {color:red; font-weight:bold;}
</style>
</head>

<body>
<ul>
  <li>List item 1
    <ol>
      <li>List item 1-1</li>
      <li>List item 1-2</li>
      <li>List item 1-3
        <ol>
          <li>List item 1-3-1</li>
          <li>List item <em>1-3-2</em></li>
          <li>List item 1-3-3</li>
        </ol>
      </li>
      <li>List item 1-4</li>
    </ol>
  </li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>
</body>
</html>

<html> <head> <style type="text/css"> ul em {color:red; font-weight:bold;} </style> </head> <body> <ul> <li>List item 1 <ol> <li>List item 1-1</li> <li>List item 1-2</li> <li>List item 1-3 <ol> <li>List item 1-3-1</li> <li>List item <em>1-3-2</em></li> <li>List item 1-3-3</li> </ol> </li> <li>List item 1-4</li> </ol> </li> <li>List item 2</li> <li>List item 3</li> </ul> </body> </html>

子元素选择器:
子元素选择器与后代选择器相似，但是与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素（儿子)。两个元素之间使用">"符号来进行分割，例如ul>li 。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 > strong {color:red;}
</style>
</head>

<body>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>
</html>

<html> <head> <style type="text/css"> p > strong {color:red;} </style> </head> <body> <p>This is <strong>very</strong> <strong>very</strong> important.</p> <p>This is <em>really <strong>very</strong></em> important.</p> </body> </html>

并集选择器:
并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明。标签之间使用","进行连接。

p , div {color:red;}

伪类选择器:
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个、第n个元素。语法如下:

selector : pseudo-class {property: value}

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

CSS字体属性

指定字体系列 font-family

p {font-family:Georgia, serif;}

可以设置一至多个字体，若用户代理有Georgia字体，则使用Georgia字体，若没有Georgia字体但是有serif字体，则使用serif字体，否则使用用户代理的默认字体

指定字体风格 font-style
该属性有三个值：

normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

指定字体粗细 font-weight
利用bold关键字可以将文本设置为粗体，关键字100-900指定了字体的粗细程度，400等价于normal，700等价于bold

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

指定字体大小 font-size
通过像素设置文本大小，可以对文本大小进行完全控制,记得单位为px（像素）。

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

更推荐使用em作为单位，1em 等于当前的字体尺寸。如果一个元素的font-size为 16 像素，那么对于该元素，1em 就等于16像素。

h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;}  /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */

CSS文本属性

指定文本缩进 text-indent
通过text-indent属性可以方便的进行缩进。所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。这个属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进 2 em：

p {text-indent: 2em;}

也可以设置为百分比或px，百分比为相对于缩进元素父元素的宽度，text-indent属性可以继承

指定文本对齐 text-align
text-align属性有三个值：

left
right
center
如字面意思一样会将文本进行左对齐/右对齐/居中对齐

指定字间隔 word-spacing
word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。
指定文本装饰 text-decoration
text-decoration 有 5 个值：

none
underline
overline
line-through
blink

可以利用a {text-decoration: none;}删去超链接的下划线

设置行间距 line-height
可以利用line-height 设置行间距

CSS引入方式

内部样式表
内部样式表是写到HTML页面内部的，是将所有的CSS代码抽取出来，单独放到<head>中的<style>标签中。

<style>
    div{
        color:red;
        ...
    }
    ...
</style>

外部样式表
适用于样式比较多的情况。核心是将样式写入CSS文件中，之后把CSS文件引入到HTML页面中使用。在HTML页面中，使用<link>标签引入到这个文件中。

<link rel="stylesheet" href="CSS文件路径">

行内样式表
行内样式表是在元素标签内部的style属性中设定CSS样式，主要适用于修改简单样式。

<p style="color:red; ... ">这是段落</p>

posted @ 2020-07-27 23:17 海物chinono 阅读(243) 评论(0) 收藏举报

刷新页面返回顶部

海物chinono