搜索到
47
篇与
的结果
-
3、类选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>累选择器</title> <style> /* 一、选择器：可以选择一个或多个标签，为其添加样式 1.语法格式： .类名{ 属性1：属性值1； } 2.使用步骤： 为标签设置一个class属性 利用类选择器中选择一个/多个标签 3.注意： 类选择器以英文的，开头 可以为多个标签指定相同的类名 类名尽量不要使用数字开头，不要使用中文，若类名过长并且由多个单词组成，可以使用"-"提高可读性 如：xxx-yyy 标签的class属性名可以同时指定多个，每个类名之间以空格隔开即可 */ .div1{ color: red; } .p1{ font-size: 30px; } </style> </head> <body> <div class="div1">我是div</div> <p class="div1 p1 p2 p3">我是1个p</p> <p>我是2个p</p> <p class="p1">我是3个p</p> <p>我是4个p</p> <p>我是5个p</p> </body> </html> -
1、css语法规则 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css语法规则</title> <!-- 一、HTML和CSS结合的三种方式 1.行内样式表（不建议使用） 将样式直接写到HTML标签的style属性中 缺点：不易于维护、不可复用、可移植开发 2.内部样式表 在HTML中的head标签中创建style标签 在style标签中利用选择器，去为选中的标签添加样式 语法格式： 选择器{ 属性1：属性值1； 属性2：属性值2； } 选择器：用于选择需要添加样式的标签 {}：称为声明块，需要为元素添加的样式，都写在声明块 样式：样式以键成对的形式呈现，样式名对应着样式值。名和值之间以英文的：连接 以英文的分号；结尾。键直对可以有多个，建议每行写一对。 缺点：仅对当前文档使用，可移植性差 3.外部样式表(推荐使用) 在外部创建一个.css结尾的文件，在该文件中编写css样式表 语法格式： 选择器{ 属性1：属性值1； 属性2：属性值2； } 在需要引入样式的页面的head标签中，利用link标签引入外部样式表 优点： 易于维护 可移植性强 提高复用性 可以利用浏览器的缓存机制，加快网页的加载速度，提高用户体验 "高内聚，低耦合" --> <!--内部样式表--> <!-- /* css注释 注意：在style标签中属于css，而css和HTML的注释不同 */ p{ color:orange; font-size: 30px; } h1{ color:blue; font-size: 80px; } --> <!--外部样式表--> <link rel="stylesheet" href="./hello.css"> </head> <body> <h1>天天好心情</h1> <p>今天天气不错</p> <p>挺风和日丽的</p> <!--行内样式表--> <!-- <h1 style="color:red;font-size: 30px;">天天好心情</h1> <p style="color:red;font-size: 30px;">今天天气不错</p> <p style="color:red;font-size: 30px;">挺风和日丽的</p> --> </body> </html>
