html基本样式

来源：互联网发布：nc.windows.app.23787 编辑：程序博客网时间：2024/06/14 01:09

此篇blog主要记载近期学习的样式

一.将CSS样式写入html主要有三种方法，分别是行内样式，内部样式，外部样式

1.行内样式

行内样式是优先级最高的样式，但是在编程中很少用，因为使用行内样式会导致大量代码冗余，且不利于更新

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML写入样式的方法</title></head><body><!--这里使用行内样式写入--><div style="color:red;background-color: aqua;width: 200px;height: 200px;text-align: center;">这里使用行内样式</div></body></html>

2.内部样式

使用内部样式和外部样式，需要使用选择器将样式和html标签关联起来，关于选择器，在后文在谈

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>内部样式</title><style type="text/css">div{width: 300px;height: 100px;border: 1px red solid;text-align: center;line-height: 100px;}</style></head><body><div>这里使用内部样式表写入样式</div></body></html>

3.外部样式

使用外部样式表，可以减少很多不必要的代码，而且有利于程序的更新，在实际项目中，是使用最多的一种方法

但是，如果程序较小，那就没必要使用外部样式表了

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>外部样式</title><link rel="stylesheet" type="text/css" href="css/comment.css"/></head><body><div>这里使用外部样式表写入样式</div></body></html><!--下面为comment.css里的内容-->

div{width: 300px;height: 100px;border: 1px red solid;text-align: center;line-height: 100px;}

二.选择器

在html中，常用的选择器有如下这些

1.通配符选择器：匹配当前页面的所有标签

格式：*{ }

通配符选择器的优先级是所有选择器中最低的，在编程中也很少用，主要用来设置全局属性

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>通配符选择器</title>        <style type="text/css">            /*通配符选择器将匹配页面中的所有标签*/            *{color: red;font-size:14px;font-family: "微软雅黑";font-weight: normal;}        </style>    </head>    <body>        <div>这是div的内容</div>        <p>这是p的内容</p>        <h1>这是h1的内容</h1>        <h6>这是h6的内容</h6>    </body></html>

2.标签选择器：选择当前页面所有与标签选择器名字相同的标签

格式：标签名{ }

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>标签选择器</title>        <style type="text/css">            /*标签选择器将选择当前页面所有与标签选择器名字相同的标签*/            div{color: red;}            p{color: blue;}            h1{color:yellow;}        </style>    </head>    <body>        <div>这是div的内容</div>        <p>这是p的内容</p>        <h1>这是h1的内容1</h1>        <h1>这是h1的内容2</h1>    </body></html>

3.类选择器：匹配页面中class值与选择器相同标签

格式：.类名{ }

类选择器是使用最多的选择器，并且，一个标签，可以使用多个样式，一个样式也可以被多个标签使用

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>类选择器</title>        <style type="text/css">            /*类选择器将匹配页面中class值与选择器相同标签*/            .div1{font-size: 18px;}            .div2{color: royalblue;}            .div3{color: red;}        </style>    </head>    <body>        <!--一个标签使用多个样式时，两个类名之间用空格隔开-->        <div class="div1 div3">我是div1</div>        <div class="div2">我是div2</div>        <div class="div3">我是div3</div>    </body></html>

4.id选择器：匹配页面中id的值与选择器相同标签

格式：#id名 { }

id选择器也是一个常用选择器，但是一个id只能被一个标签使用

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>id选择器</title>        <style type="text/css">            /*id选择器将匹配页面中ID值与选择器相同标签*/            #div1{font-size: 18px;}            #div2{color: royalblue;}            #div3{color: red;}        </style>    </head>    <body>        <!--虽然id被重复使用不会报错，但是会导致后期进行js布局时，造成紊乱-->        <div id="div1">我是div1</div>        <div id="div2">我是div2</div>        <div id="div3">我是div3</div>    </body></html>

阅读全文

1 0