Css与html三种结合方式 Css四种选择器

来源：互联网发布：淘宝卖家破损补寄编辑：程序博客网时间：2024/06/05 19:04

一、css与html的结合

三种方式、html与css结合如下：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><!-- 此处是方式二的实现：<style type="text/css">    div{         border: 1px solid red;    }    span{        border: 2px solid blue;    }</style> --><title>html css</title>此处是方式三的实现：<link rel="stylesheet" type="text/css" href="../css/1.css"> </head><body>方式一、在标签的style属性上设置”key:value value;”，修改标签样式。 例如：分别定义两个 div、span标签，分别修改每个 div 标签的样式为：边框1个像素，实线，红色。此处是方式一的实现：<div style="border: 1px solid red;">我是div标签1</div><div style="border: 1px solid red">我是div标签2</div><div>我是div标签3</div><div>我是div标签4</div><span style="border: 1px solid red">我是span标签1</span><span>我是span标签2</span><span>我是span标签3</span>

方式一问题：这种方式的缺点？
1.如果标签多了。样式多了。代码量非常庞大。
2.可读性非常差。
3.Css代码没什么复用性可方言。

方式二、在head标签中，使用style标签来定义各种自己需要的css样式。
格式如下：
xxx {
Key : value value;
}

问题：这种方式的缺点。

1.只能在同一页面内复用代码，不能在多个页面中复用css代码。2.维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了。

方式三、使用html 的实现：

<link rel="stylesheet" type="text/css" href="./styles.css"> 标签 导入 css 样式文件。 标签名选择器格式:标签名{css代码}

二、css的三种选择器和组合选择器

（一）、标签名选择器

标签名选择器格式：    标签名{        CSS    }

标签名举例实现：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style type="text/css">/*    css选择器一、标签名选择器    需求1：在所有div标签上修改字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。    并且修改所有span 标签的字体颜色为黄色，字体大小20个像素。边框为5像素蓝色虚线。*/div{    border: 1px yellow solid;    color: blue;                             font-size: 30px;}span {    border: 5px blue dashed;    color: yellow;    font-size: 20px;}</style></head><body><!-- 例1：在所有div标签上修改字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。并且修改所有span 标签的字体颜色为黄色，字体大小20个像素。边框为5像素蓝色虚线。 -->    <div>我是div标签1</div><br />    <div>我是div标签2</div>    <span>我是span标签1</span>    <span>我是span标签2</span></body></html>

（二）id选择器

格式：

ID选择器格式：#id属性值{CSS代码}<style type="text/css">#id004{     color: blue;     font-size: 30px;     border: 1px yellow solid;}#id003{      color: red;      font-size: 20px;      border: dotted blue 5px;}</style><!-- id选择器例1：分别定义两个 div 标签，第一个div 标签定义 id 为 id004 ，然后根据id 属性定义css样式修改字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。第二个span 标签定义 id 为 id003 ，然后根据id 属性定义css样式 修改的字体颜色为红色，字体大小20个像素。边框为5像素蓝色点线。 --></head><body>    <div id="id004">div标签1</div>    <span id="id001">span标签1</span>    <div id="id002">div标签2</div>    <span id="id003">span标签3</span></body></html>

（三）class选择器

类型选择器的格式：

.class属性值{CSS代码}

举例如下：

需求1：修改 class 属性值为 class01的 span 或 div 标签，字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。需求2：修改 class 属性值为 class04的 div 或 span标签，字体颜色为灰色，字体大小26个像素。边框为1像素红色实线。 <style type="text/css">.class001{    color: blue;    font-size: 30px;    border: 1px yellow solid; }.class004{     clolr: grey;     font-size: 26px;     border: 1px red solid; } </style></head><body>    <div class="class004">div标签1 class004</div>    <span class="class001">span标签1 class001</span>    <div class="class003">div标签2 class003</div>    <span class="class002">span标签2 class002</span>    <div class="class004">div标签3 class004</div>    <span class="class001">span标签3 class001</span></body></html>

（四）组合选择器

组合选择器格式：

选择器1，选择器2{CSS代码}

如下：

<!--例子：修改 class="class01" 的div 标签 和 id="id01" 所有的span标签，字体颜色为蓝色，字体大小20个像素。边框为1像素黄色实线。 --> <style type="text/css">  .class01,#id01{   color: blue;   font-size: 20px;   border: 1px yellow solid;  }</style></head><body><div class="class002">div标签2 class002</div><span id="id01">span标签1 id01</span><div class="class01">div标签4 class001</div><span id="id03">span标签3 id01</span><div id="id02">div标签2 id02</div><span class="class002">span标签2 class002</span><div class="class01">div标签3 class001</div></body></html>

0 0