css是什么
css(cascading style sheet,可以译为“层叠样式表”),是一组格式设置规则,用于控制web页面的外观
如何让一个标签具有样式
第一步:必须保证引入方式正确
第二步:必须让css和html元素产生关联,也就是说要先找到这个元素
第三步:用相应的css属性去修改html元素样式
css的三种引入形式
1、将css内嵌到HTML文件中,这种方式又叫内联样式表,例如
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>第一个网页</title> <style type="text/css"> #box{ width: 100px; height: 100px; background: red; } </style> </head> <body> <div id="box"></div> </body> </html>
2、将一个外部样式链接到HTML文件中,这种方式又叫链接样式表,例如:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>第一个网页</title> <link rel="stylesheet" href="css/index.css" /> </head> <body> <div id="box"></div> </body> </html>
3、将样式表加入到HTML文件中,这种方式又叫做行内样式表
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>第一个网页</title> </head> <body> <div style="width: 200px;height: 200px;background: green;"></div> </body> </html>
基础选择器
id选择器:id选择器在css中只出现一次
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>第一个网页</title> </head> <style type="text/css"> #box{ width: 50px; height: 50px; background: red; } </style> <body> <div id="box"></div> </body> </html>
类选择器:将相同类型的元素进行分类定义,分类定义的好处就是能够复用
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>第一个网页</title> </head> <style type="text/css"> .box{ width: 50px; height: 50px; background: red; } </style> <body> <div class="box"></div> </body> </html>
标签选择器:直接使用HTML标签名称作为css选择器的名称,这种方式会影响HTML中所有此标签的样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>第一个网页</title> </head> <style type="text/css"> div{ width: 50px; height: 50px; background: red; } </style> <body> <div ></div> </body> </html>
原文地址:https://www.cnblogs.com/sellsa/p/9014923.html
时间: 2024-10-08 03:43:46