"HTML和CSS是前端开发的基础,用于构建网页的结构和样式。本文将介绍HTML及CSS的一些基本概念和用法。
(一)内联样式
在HTML中,可以通过在元素内部添加`<style>`标签来定义内联CSS。例如:
```html
<style type="text/css">
mm {background-color:red;}
</style>
```
这段代码会使所有`mm`标签的背景色变为红色。
(二)CSS语法
CSS语句通常由选择器(如标签名、类名或ID名)和声明块组成。声明块使用花括号包围,其中包含一个或多个声明。声明由属性名和值组成,两者之间用冒号隔开,例如:
```css
mm {
background-color: red;
}
```
(三)颜色表示
CSS支持多种颜色表示方式,包括名称、RGB、十六进制等:
```css
mm {
background-color: red; /* 颜色名称 */
color: rgb(50%, 50%, 0%); /* RGB 百分比 */
color: rgb(50, 55, 155); /* RGB 数值 */
background-color: #0F0; /* 十六进制 */
}
```
(四)多重声明
可以在同一个选择器内合并多个声明,用分号隔开:
```css
mm {
background-color: red;
color: rgb(50%, 50%, 0%);
}
```
(五)大小写
CSS对大小写不敏感,但与HTML元素关联时(如类名),需注意大小写匹配。
(六)层叠和继承
后代元素可以继承父元素的样式,通过添加新的选择器来改变特定子元素的样式。例如:
```css
nn {
color: rgb(50, 55, 155);
background-color: #0F0;
}
nndifferent {
background-color: rgb(10%, 10%, 10%);
}
```
`nndifferent`将拥有与`nn`不同的背景色,但其他样式(如颜色、字体大小)会继承自`nn`。
(七)ID选择器和类选择器
在HTML中,`id`是唯一的标识符,CSS可以用`#`选取:
```html
<mm id="nn">pppp</mm>
```
对应的CSS:
```css
#nn {
background-color: red;
position: absolute;
left: 500px;
top: 500px;
color: rgb(50%, 50%, 0%);
font-size: 45px;
}
```
(八)绝对定位
绝对定位允许元素相对于其最近的非静态定位祖先元素定位。例如:
```css
#nn {
position: absolute;
left: 500px;
top: 500px;
}
```
这样,id为`nn`的元素会被定位到页面的指定位置。
以上是HTML和CSS的基础知识,包括内联样式、语法、颜色、多重声明、大小写规则、层叠和继承、ID选择器以及绝对定位。掌握这些基础知识是成为前端开发者的第一步。