CSS选择器及用法

最新推荐文章于 2022-09-22 12:31:07 发布

forget_over_life

最新推荐文章于 2022-09-22 12:31:07 发布

阅读量457

点赞数

分类专栏： HTML网页设计文章标签： css 标签选择器网页开发

本文链接：https://blog.csdn.net/foget_over/article/details/47747265

版权

HTML网页设计专栏收录该内容

5 篇文章 0 订阅

订阅专栏

用来修饰标签的技术，叫层叠样式表——简称CSS

一、CSS选择器

1.1.id选择器

选中网页中某一个指定ID的标签的样式
网页中的标签，每个标签有且仅有一个唯一的ID
实例：

1.2.class选择器

选中所有网页中指定class属性的标签的样式
不同的标签的class属性可以一样，表示使用同一种样式来修饰
实例：

1.3.标签选择器

使用指定的标签，来修饰网页中所有选中的标签的样式
实例：

1.4.组合选择器

|-- 兄弟选择器

|-- 子元素选择器——#msg > li{}

|-- 内部选择器—— #msg li{}

二、怎么使用CSS

2.1. 标签内嵌的CSS样式

|-- HTML标签，标签属性都有一个style属性，在style属性中编辑css样式
|-- <div style="width:20px;height:10px;"></div>

实例：

    <body>
        人生<u>没有</u>彩排,<p><del>每一秒</del>都是现场直播。</P><br />
        <b><i>加油!</i></b><hr/>
        <strike style="color:#ccc">原价109</strike>现价89
    </body>

2.2. 页面内嵌的CSS样式

|-- 网页中在<head></head>标签里，嵌入<style></style>标签，在标签中编辑网页中的CSS样式
实例：

    <!doctype html>
    <html>
      <head>
        <meta charset="GB13080">
        <title>我的主页</title>
        <style>/*设置字体颜色及大小写在<style>标签*/
        #old{
   	        color:blue;
   		font-size:20px;    
        }
        #new{
    	    color:red;
    	    font-size:40px;
        }  
        </style>
     </head>
     <body>
        人生<u>没有彩</u>排，<p><del>每一秒</del>都是现场直播。</p><br/>
        <b><i>加油！</i></b><hr/>
        <span id="old"><strike>原价109</strike></span><span id="new">现价89</span>
     </body>
   </html>

3. 外部CSS样式

|-- 网页外部创建一个单独的样式表文件【**.css】，然后引入到网页中，当前网页就可以使用【**.css】中定义的样式
实例：

<span style="white-space:pre">	</span><!doctype html>
<span style="white-space:pre">	</span><html>
<span style="white-space:pre">	</span>    <head>
<span style="white-space:pre">	</span>        <meta charset="utf-8">
<span style="white-space:pre">	</span>        <title>无标题文档</title>
<span style="white-space:pre">	</span>        <!-- 使用Link标签，引入一个外部的css样式表 -->
<span style="white-space:pre">	</span>        <strong><link rel="stylesheet" type="text/css" href="css/index2.css"></strong>

<span style="white-space:pre">	</span>        <style>
<span style="white-space:pre">	</span>        #pageinner input{width:120px;height:18px;color:#363434;}
<span style="white-space:pre">	</span>        </style>
<span style="white-space:pre">	</span>    </head>

        </html>

三、CSS使用语法：

3.1.标签内嵌CSS样式：

|-- 属性名称:属性值

|-- 属性名称:属性值;属性名称:属性值;

3. 2.外部CSS样式：

选择器{

属性名称:属性值;

属性名称:属性值;

属性名称:属性值;

}

forget_over_life

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器及用法

用来修饰标签的技术，叫层叠样式表——简称CSS一、CSS选择器 1.1.id选择器选中网页中某一个指定ID的标签的样式网页中的标签，每个标签有且仅有一个唯一的ID实例： 1.2.class选择器选中所有网页中指定class属性的标签的样式不同的标签的class属性可以一样，表示使用同一种样式来修饰实例： ...
复制链接

扫一扫

专栏目录