css的入门——css简介，颜色，文本

Posted 2021-12-04 banbianfengxue

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css的入门——css简介，颜色，文本相关的知识，希望对你有一定的参考价值。

CSS简介

1.理解CSS：设想元素周围有一个看不见的盒子。

　　CSS将样式规则与html元素相关联，CSS通过将规则与HTML元素相关联的方式来工作。这些规则用来控制指定元素中的内容如何显示。一条CSS规则包含两个部分：一个选择器和一条声明。

p {font-family；Arial;}

　　这条规表明所有<p>元素都已更改用Arial字体来显示。

　　其中绿色部分为选择器，选择器表明要应用规则的元素。同一条规则可以应用在多个元素上，前提是你需要将这些元素名用逗号隔开。

　　蓝色部分是声明，声明用于表明应该如何显示选择器指明的元素。声明分为两个部分（属性和值）并以冒号作为分隔符。

　　CSS属性会影响元素的显示方式，CSS声明位于花括号中，而且每条声明都由两个部分组成：属性和值，两者由冒号隔开。可在一条声明内指定多个属性，各属性之间用分号隔开。

h1,h2,h3{

　　font-family:Arial;

　　color:yellow;

}

　　上面这条规则表明所有的<h1>元素,<h2>元素,<h3>元素将以黄色的Arial字体显示。

　　红色部分是属性，属性表明和你想要改变元素的哪些方面，例如颜色，字体，宽度，高度和边框。

　　黄色部分是值，值用来指定想要在所选属性上应用的设置。例如，如果要指定一个颜色属性，那么你这个属性的值就是你希望这些元素中的文本所呈现的颜色。

2.外部CSS与内部CSS

　　使用外部CSS

<!DIOCTYPE html>
<html>
    <head>
        <title>Using External Css</title>
        <link rel="stylesheet" href="style.css">

    </head>
    <h1>Potatoes</h1>
    <p>There are dozens of different potato varieties.They are usually described as early.second early and maincrop potatoes.</p>
</html>

body{
    font-family: Arial;
    background-color: rgb(185,179,175);
}
h1{
    color: rgb(255,255,255);
}

href：该特性表明CSS文件的路径（通常位于css或style文件夹中）。

type：该特性表明页面所链接的文档类型。他的值应该是test/css。

rel：该特性表明HTML页面与被链接文件的关系。当链接到一个CSS文件时，该特性的值应该为stylesheet。

一个HTML页面可以使用多个CSS样式表，这时页面就需要为所使用的每个CSS文件添加一个<link>元素。例如，有些设计人员利用一个CSS文件来控制表现（比如字体颜色），而用另一个CSS文件来控制布局。

　　使用内部CSS

<!DIOCTYPE html>
<html>
    <head>
        <title>Using External Css</title>
        <style type="text/css">
        body{
            font-family: Arial;
            background-color: rgb(185,179,175);
            }
        h1{
            color: rgb(255,255,255);
        }
</style>
    </head>
    <h1>Potatoes</h1>
    <p>There are dozens of different potato varieties.They are usually described as early.second early and maincrop potatoes.</p>
</html>

　　1.允许所有页面使用同样的样式规则（而不必在每个页面内重复他们）；

　　2.将页面的内容和表现分离；

　　3.意味着你可以通过修改一个文件（而不必修改每个页面）来改变所有页面的样式。

3.CSS选择器

　　CSS选择器的种类很多，这些选择器允许你将CSS规则的应用与HTML文档中的特定元素。CSS选择器是区分大小写的，必须准确匹配元素名称和特性值。

通用选择器　　　　应用于文档中所有的元素　　　　　　　　　　　　*{}应用于所有元素

类型选择器　　　　匹配元素名称与选择器相同的元素　　　　　　　　h1,h2,h3{}应用于<h1>,<h2>,<h3>元素

类选择器　　　　　匹配这样的元素：元素的class特性值　　　　　　　.note{}应用于所有class特性值为note的元素

　　　　　　　　　与此选择器点（或句点）符号后面的部分相同　　　p.note{}只应用于class特性值为note的<p>元素

ID选择器　　　　　匹配这样的元素：元素的id特性的值与此选择　　　#introduction{}应用于id特性值为introdcution的元素

　　　　　　　　　器警号后面的相同部分　　　　　　　　　　　　

子元素选择器　　　匹配指定元素的直接子元素　　　　　　　　　　　li>a{}应用于所有父元素为<li>的<a>元素（对页面中的其他<a>元素不起作用）

后代选择器　　　　匹配指定元素的后代元素（不仅是直接子元素）　　p a{}应用于所有位于<p>元素中的<a>元素，无论它们之间有没有嵌套关系

相邻兄弟选择器　　匹配一个元素的相邻的兄弟元素　　　　　　　　　h1+p{}应用于<h1>元素之后的第一个<p>元素（对其他<p>元不起作用）

普通兄弟选择器　　匹配一个元素的兄弟元素，无论是否相邻　　　　　h1~p{}如果有两个<p>元素均为<h1>的兄弟元素，那么这些规则对这两个<p>元素都起作用

4.CSS如何级联

　　如果有两个或更多的规则应用于同一个元素上，那么了解的优先级关系是非常重要的，CSS级联有以下规则：

　　就近原则：如果两个选择器完全相同，那么后出现的选择器优先级较高

　　具体性原则:如果一个选择器比其他选择器更加具体，那么具体的选择器优于一般的选择器。

　　重要性：你可以哎任意属性值额后米娜添加！important来强调这条规则比应用与同一元素的其他规则更重要。

5.继承

　　如在<body>元素上指定了font-family属性或者color属性，那么它们将应用于<body>元素的大多数子元素上。这是因为font-family的属性值被这些子元素所继承。属性的继承让你不必在每个元素上都应用这些属性，并使样式表更加简洁。

　　相比于上面提到的属性，background-color属性和border属性则有所不同，它们不会被子元素继承。

　　你可以通过将属性值设置称为inherit来强制大多数元素从他的父元素中继承属性值。

<div class="page">
    <head>
        <link rel="stylesheet" href="inherit.css">
    </head>
    <h1>Potatoes</h1>
    <p>There are dozens of different popato varieties</p>
    <p>They are usually described as early,second early and maincrop potatoes</p>
</div>

body{
    font-family: Arial,Verdana,san-serif;
    color: #665544;
    padding: 10px;
}
.page{
    border: 1px solid #665544;
    background-color: #efefef;
    padding: inherit;
}

颜色

1.前景色 color

color：color属性允许你指定元素中文本的颜色。你可以采用以下三种方法之一来指定任何颜色：

RGB值：这种方式从组成一种颜色分别需要多少红色，绿色，蓝色的角度来标识颜色，如rbg（100，100，100）。

十六进制编码:这种编码方式是通过六位十六进制编码标识颜色，其中的六位编码（每两位过程一个值，共三个值）分别代表一种颜色中红，绿，蓝的数量，如#ee3e80.

颜色名称：浏览器可以识别147种预定义的颜色名称，例如DarkDyan。

2.背景色 background-color

CSS在处理每个HTML元素时都假设它们位于一个无形的盒子中，而background-color属性设置的正是这个盒子的背景色。设定方式与color相同。

3.对比度

　为了使文本清晰易读，在选取前景色和背景色时，一定要保证两者之间有足够的对比度。

　　当前景色与背景色之间的对比度较低时，文本就会难以阅读；当前景色与背景色之间对比度较高时，文本会易于阅读。对于长文本来说，适当地降低对比度能够提升可读性。

4.透明度 opacity，rgba

　　CSS3引入了opacity属性，opacity属性允许你指定元素一起子元素的透明度。改属性值是一个介于0.0~1.0之间的数字

　　CSS3中的rgba属性允许你像rgb值那样指定颜色，不过它增加了一个用来表示透明度的值。这个值被称为alpha值，介于0.0~1.0之间。

p.one{
    background-color: rgb(0,0,0);
}
p.two{
    background-color: rgb(0,0,0);
    background-color: rgba(0, 0,0,0.5);
}

5.示例：PH Scale

<!DOCTYPE html>
<html>
    <head>
        <title>Color</title>
        <link rel="stylesheet" href="hp.css">
    </head>
    <body>
            <h1>PH Scale</h1>
            <p class = "fourteen">14.0 VERY ALKALINE</p>
            <P class="thirteen">13.0</P>
            <p class="twelve">12.0</p>
            <p class="eleven">11.0</p>
            <p class="ten">10.0</p>
            <p class="nine">9.0</p>
            <p class="eight">8.0</p>
            <p class="seven">7.0 NEUTRAL</p>
            <p class="six">6.0</p>
            <p class="five">5.0</p>
            <p class="four">4.0</p>
            <p class="three">3.0</p>
            <p class="two">2.0</p>
            <p class="one">1.0</p>
            <p class="zero">0.0 VERY ACID</p>
    </body>
</html>

body{
    background-color:silver;
    color:white;
    padding:20px;
    font-family:Arial,Verdana,san-setrif;
}
h1{
    background-color: #ffffff;
    background-color: hsla(0,100%,100%,0.5);
    color: #64645A;
    padding: inherit;
}
p{
    padding: 5px;
    margin: 0px;
}
p.zero{
    background-color: rgb(237,62,128);
}
p.one{
    background-color: rgb(244,90,139);
}
p.two{
    background-color: rgb(243,106,152);
}
p.three{
    background-color: rgb(244,123,166);
}
p.four{
    background-color: rgb(245,140,178);
}
p.five{
    background-color: rgb(246,159,192);
}
p.six{
    background-color: rgb(245,176,204);
}
p.seven{
    background-color: rgb(0,187,136);
}
p.eight{
    background-color: rgb(140,202,242);
}
p.nine{
    background-color: rgb(114,193,240);
}
p.ten{
    background-color: rgb(84,182,237);
}
p.eleven{
    background-color: rgb(48,170,233);
}
p.twelve{
    background-color: rgb(0,160,230);}
p.thirteen{
    background-color: rgb(0,149,226);
}
p.fourteen{
    background-color: rgb(0,136,221);
}

文本

1.字体术语

衬线字体：衬线字体在字母主要比画的末端处有一些额外的装饰。这些装饰被称为衬线，在打印时，考虑衬线字体便于阅读，所以通常将其应用于长篇文本。

无衬线字体：无衬线体的字母有拥有笔直的线条，因此他的设计更加简洁，屏幕分辨率要低于打印分辨率，因此如果文本非常小，无衬线字体阅读起来会更清晰。

等宽字体：等宽字体中的每个字母的宽度都相同，而非等宽字体中字母的宽度不同，由于等宽字体可以精确地对齐，便于文本的跟随，因此通常用于显示代码。

粗细：字体的粗细不仅能起到强调作用，还可以影响空白区域的大小以及页面上的对比情况。

样式：有些字体的斜体呈现为连笔风格，倾斜字体的样式是将普通样式进行一定角度的倾斜。

伸缩：在压缩（或缩窄）版本的字体种，字体会更窄，间距也更小；在伸展版本的字种，字母会更宽，间距也更大。

常用的衬线字体有：Georgia，Times，Times New Roman

常有的无衬线字体：Arial，Verdana，Helvetica

常用的等宽字体：Courier，Courier New

2.字体选用 font-family

　　对于应用了CSS规则的元素，font-family属性允许你为这戏而元素中的任意文本指定字体。该属性的值为你希望使用的字体名称。网站访问者需要在他们的计算机上安装你在网站中制定的字体，这样网站中才能显示这种字体。你可以指定一组字体并用逗号将各个字体隔开，这样一来，如果用户没有安装你指定的说选字体，浏览器将改用这个列表中的其他字体。如果一个字体的名称是由多个单词组成的，就需要将字体名称放在双引号中。

3.字体大小 font-size

　　font-size属性用于指定字体的大小，可以采用多种方式来指定字体的大小，最常用的方式有：

像素：像素之所以被广泛使用，是因为它能让web设计人员对文本占用的空间进行精确的控制。它的表示方式使在像素值后面加上px。

百分数：文本在浏览器中的默认大小是16px。因此75%相当于12px，200%相当于32px。

EM值：1em相当于一个字母m的宽度。

4.选用更多字体 @font-face

　　@font-face通过指定字体的下载地址（当这种字体在用户的计算机上没有安装时，就会自动下载）来让你调用字体，即便用户在浏览时使用的计算机上没有安装相应的字体也可以加以使用。由于这种技术需要将某种格式的字体下载到用户的计算机上，因此取得以这种方式使用字体的许可是非常重要的。

font-family：该属性指定字体的名称。指定的字体名称可以在样式表的其余部分作为font-family的属性的值使用。

src：该属性指定字体的路径。为了让这一技术在所有的浏览器中可用，你可能需要指定该字体多种不同版本的路径。

format：该属性指定所提供字体的格式。

你可以在以下网站寻找开源的字体，但是需要注意的是，有一些字体只针对个人免费：

www.fontex.org　　www.fontsquirrel.com　　www.openfontlibrary.org

5.字体格式

　　不同的浏览器支持不同的字体格式，因此，为了兼容所有的浏览器，你需要提供字体的多个变体。如果没有某种字体的所有格式，你可以将这种字体上传到一个叫做Font Squirrel的网站，他可以为你转换字体格式：www.fontsquirrel.com/fontface/generator

6.粗体 font-weight

　　font-weight属性允许你创建粗体文本，该属性通常选用以下两个值：

normal：该值是文本以普通粗细显示。

blod：该值使文本以粗体显示。

7.斜体 font-style

　　如果要创建斜体文本，可使用font-style属性，该属性有三个可选值：

normal：该值使文本以普通字体显示。

italic：该值使文本以斜体显示。

oblique：该值使文本倾斜显示。

传统上，斜体（italic）使基于手写体风格的字体版本，而字体倾斜（oblique）则是普通字体倾斜一定的角度。

8.大写和小写 text-transform

　　text-transform属性用来改变文本的大小写，可以选用以下值之一：

uppercase：该值使文本以大写显示。

lowercase：该值使文本以小写显示。

capitalize：该值使每个单词的首字母以大写显示。

9.下划线和删除线 text-decoration

　　text-decoration属性可以选用以下值：

none：该值会把应用在文本上的装饰线删除。

underline：该值会在文本底部增加一条实线。

overline：该值会在文本顶部增加一条实线。

line-through：该值会用一条实现穿过文字。

blink：该值会使文本动态闪烁（不过可能会有点烦人）。

10.行间距 line-height

　　行间距（leading）使印刷行业在文本行的垂直空间上使用的一种术语。对于一种字体来说，位于基准线以下的部分称为分母下缘（descender），而字母的最高点称为分母上缘（ascender）。行间距使指某一行字母下缘的底端到下一行字母伤员的顶端之间的距离。在CSS中，line-height属性用于设置文本行的整个高度，因此font-size和line-height差别就在于行间距。

11.字母间距和单词间距 letter-spacing，word-spacing

　　字距是印刷行业用来描述字母之间空袭的一个术语。可以使用letter-spacing属性来控制字母之间的间距。当标题或语句全部采用大写形式时，letter-spacing属性可以用来增加字距。如果文本时普通格式，那么增加或者减小字距都会降低文本的可读性。

　　还可以使用word-spacing属性来控制单词间距。该属性的值应该以em值来指定，而且所指定的值会加到字体的默认单词间距上。单词的默认间距是由字型设定的（通常在0.25em左右），而且没有必要经常修改这个间距。如果字型时粗体或者你已经增加了字母间距，那么增加单词间距可以提高文本的可读性。

12.对齐方式 text-align

　　text-align用于控制文本的对齐方式。该属性可以用以下值：

left：该值表明文本向左对齐。

right：该值表明文本向右对齐。

center：该值将文本居中显示。

justify：该值表明文本两端对齐，即段落中除了末行以外的其他每行都要在宽度上沾满文本所在的容器。

13.垂直对齐vertical

　　vertical-align属性常常会引起概念混淆。它的目的不是让你在块级元素中垂直对齐文本，尽管它可以在表格的单元格中实现这种效果。通常情况下，vertical-align属性更多地被用于内联元素，比如<img>元素，<em>元素和<strong>元素。当用于这些元素时，它实现的效果类似于应用与<img>元素上的align特性。vertical-align属性可以选用的值包括：

baseline　　sub　　super　　top　　text-top　　middle　　bottom　　text-bottom

14.文本缩进 text-indent

　　text-indent属性允许你将元素中的首行文本进行缩进，可以采用许多方式来指定首行的所尽量，但通常采用像素或em值。

15.CSS3：投影 text-shadow

　　text-shadow属性目前已经被广泛应用，尽管并不是所有的浏览器都支持这一属性。该属性用于创建投影，投影指的时比文本颜色更暗的版本，它位于文本的后方并略有偏移。该属性还可以通过添加亮度比文本稍高的阴影来创建浮雕效果。由于创建投影效果需要指定三个长度和一个颜色，因此该属性的值非常复杂。第一个长度值表明阴影向左或向右延伸的距离；第二个长度值表明阴影向上或者向下延伸的距离；第三个长度值为可选项，用于指定投影的模糊程度；最后一项是投影的颜色值。

p{
    background-color: #eeeeee;
    columns: #666666;
    text-shadow: 1px 1px 1px #000000;
}

16.首字母或首行文本：first-letter，：first-line

　　你可以通过：first-letter和：first-line为一个元素中的首字母或首行文本另外指定一个值。从技术角度看，：first-letter和first-line并不是属性值，他们被称为伪元素。

p:first-letter{
    font-size: 200%;
}
p :first-line{
    font-weight: bold;
}

17.链接样式：link，visited

　　默认情况下，浏览器常常以蓝色显示链接并附带下划线，此外，浏览器还会改变哪些已经访问过的链接的颜色，一次来帮助用户分清他们访问过哪些页面。在CSS中，有两个伪类允许你为已访问的和尚未访问的链接定义不同的样式。

：link：该伪类允许你为那些尚未访问的链接设置样式。

：visited：该伪类允许你为那些已经单机过的链接设置样式。

a:link{
    color: deeppink;
    text-decoration: none;
}
a:visited{
    color:black;
}

18.响应用户：hover，：active，：foucus

　　当用户与元素进行交互时，可以是使用以下三种伪类来改变元素的外观：

：hover：该伪类在用户将定位设备（比如光标）悬停于某个元素上时生效。通常在用户将光标放在链接或按钮上时，该伪类可用于改变这些元素的外观。需要注意，这些事件在使用了触控屏幕的设备上不起作用。

：active：该伪类在用户在元素上进行操作时生效。例如，当按钮被按下时，或者链接被单击时。有时该伪类通过略微改变元素的样式或位置来使按键或链接感觉更像是被按下了。

：focous：该伪类在元素拥有焦点时生效。所有的交互性元素都可以拥有焦点。当浏览器发现你准备与页面中的某个元素进行交互时，这个元素就会获得焦点。例如，当光标位于一个准备接受文本输入的表单控件中时，我们就说这个空间获得了焦点。还可以使用tab键在页面中的交互性元素间进行切换。当使用多个伪类时，应当遵循以下顺序：link，visited，hover，focus，active。

19.特性选择器

　　在CSS中，还有一套特性选择器允许你创建规则，这些规则应用于那些特性中含有特定值的元素。

EXISTENCE（简单选择器）　　[ ] 匹配一种特定的特性（与特性值无关）

示例：p[class] 应用于所有包含ckass特性的<p>元素。

EQUALITY（精确选择器）　　[=] 匹配一个特定的特性，该特性具有特定的值

示例：p[class="dog"] 应用于所有class特性值为dog的<p>元素。

SPACE（部分选择器）　　[~=] 匹配一个特定的特性，该特性值出现在以空格隔开的单词列表中

示例：p[class~="dog"] 应用于特定的<p>元素，这些元素的class特性值是以空格隔开的单词列表，而其中一项是dog。

PREFIX（开头选择器）　　[^=] 匹配一个特定的特性，该特性的值以某个特定的字符串开头

示例：p[attr^"d"] 应用于特定的<p>元素，这些元素的某个特性的值以字母“d”开头。

SUBSTRING（包含选择器）　　[*=] 匹配一个特定的特性，该特性的值包含一个特定的子字符串

示例：p[attr*"do"] 应用于特定的<p>元素，这些元素的某个特性值中含有“do”。

SUFFIX（结尾选择器）　　[$=] 匹配一个特定的特性，该特性的值以某个特定的字符串作为结尾

示例：p[attr$"g"] 应用于特定的<p>元素，这些元素的某个特性的值以字母“g”结尾。

20.示例

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="Briards.css">
    <title>Text</title>
</head>
    <body>
        <h1>Briards</h1>
        <h2>A Heart wrapped in fur</h2>
        <p class="intro">The <a class="breed" href="http:en.wikipedia.org/wiliBriard">briard</a>.
        or berger de brie.,is a large breed of dog traditionally used as a herder and guardian of sheep.</p>
        <h3>Breed History</h3>
        <p>The briard,which is believed to originated in Frace.has been bred for centuries to herd and to protect sheep.The breed was used by
            The Frech Army as sentries,messengers and to search were used in the First Word War alomost to the point od extinction.
            Currently the population of briards is slowly recovering.Charlemagne,Napoleon,Thomas Jefferson and Lafayette all owned briards.
        </p>
        <p class="credits">by Ivy Duckett</p>
    </body>
</html>

body{
    padding: 20%;
}
h1,h2,h3,a{
    font-weight: normal;
    color: #0088dd;
    margin: 0px;
}
h1{
    font-family: Georgia,Times,serif;
    font-size: 250%;
    text-shadow: 2px 2px 2px #666666;
    padding-bottom: 10px;
}
h2{
    font-family: "Gill Sans",Arial,sans-serif;
    font-size: 90%;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}
h3{
    font-size: 150%;
}
p{
    font-family: Arial,Verdana,sans-serif;
    line-height: 1.4em;
    color: #665544;
}
p.intro::first-line{
    font-weight: blod;
}
.credits{
    font-style: italic;
    text-align: right;
}
a{
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}

以上是关于css的入门——css简介，颜色，文本的主要内容，如果未能解决你的问题，请参考以下文章