写在开篇html的内容,想要改变它的样式?例如颜色、字体、布局,等等,怎么破?CSS代码带你起飞!css语法
css的语法非常简单,如下:
选取器 {属性: 值;属性:值}
例如:
h2 {color: cornflowerblue;font-size: 60px;}
上面的h2是元素选取器,属性color,它的值是cornflowerblue。属性font-size,它的值是60px。运用css的3种方式
有3种css的运用方式: 外边 CSS内部 CSS行内 CSS虽然有3种,但笔者只讲外边css,在实质研发中,内容必要和样式分离,大有好处,慢慢体会吧!那样怎样运用外边的css?必须在html的head中经过link来引入,如下:
<head>
<link rel="stylesheet" href="./test.css">
</head>
css代码中怎样写注释在写代码的过程中,注释很要紧。但不要茫然的注释,对重要的、要紧的规律做简单明了的注释就可,否则写的代码看起来跟一坨屎没什么区别。那样在css代码中,亦是能够做注释的。当然了,该注释的时候就注释,不应注释的时候就别注释。那到底要不要加注释?算了,随你吧!不!我还是啰嗦一下,对简单明了、见名知意的代码就不必注释了,要尽可能让咱们的代码看起来简洁、优雅。笔者曾经接手过一个项目,看了别人写的代码之后,便是一坨屎。我看个屁啊!直接重写,看都不想看了。回到正题,解锁3种注释姿势。
姿势1:
/* 注释内容 */
h2,h3,p{
text-align: center;
color: cornflowerblue;
font-size: 60px;
}
姿势2:
/* 注释内容,注释内容,
注释内容。
*/
h2,h3,p{
text-align: center;
color: cornflowerblue;
font-size: 60px;
}
姿势3:
h2,h3,p{
text-align: center;
color: cornflowerblue; /* 注释内容 */
font-size: 60px;
}
css选取器css的选取器很要紧,因此笔者单独拿出来讲了。下面咱们剖析一下5种选取
1. 元素选取器元素选取器便是经过元素来进行选取,并设置css样式,看下面小栗子。创建home.html文件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>全栈运维学习</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<p>面向运维编程</p>
<p>面向运维编程</p>
</body>
</html>
创建test.css文件
p {
text-align: center;
color: red;
}
2. id选取器经过id选取器,来选取元素,前提要求是元素必须设置了id,看下面的小栗子。创建home.html文件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>全栈运维学习</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<p id="a1">面向运维编程</p>
<p id="a2">面向运维编程</p>
</body>
</html>
创建test.css文件
#a1 {
text-align: center;
color: blue;
font-size: 100px;
}
id选取器的语
|