css选择器设置标签样式

css选择器

在html标签上设置style可以给标签设置属性：

<div style="background-color: #2459a2;height: 48px;">啊啊啊</div>

我们还可以通过<head>标签里设置选择器，这样每种样式只需要写一遍

<head><meta charset="UTF-8"><title>Title</title><style><!--在这里写选择器--></style>
</head>

具体的选择器有很多种：

1、通过id来复制样式

#i1{background-color: #2459a2;height: 48px;
}

在body里的标签这样用：但id不能写多个，所以还是不能多用

    <div id="i1"></div><div id="i1"></div>但id不能写多个（不规范）

2、通过class来复制：

/*class选择器：用class=c1来就可以复制这个样式，同时避免了id必须统一的缺陷*/
.c1{background-color: #2459a2;height: 60px;
}

使用的时候：

    <div class="c1">1251251</div>能写多个<div class="c1">1251253</div>能写多个

3、标签选择器：把某一标签都变成这个样式：

标签选择器：把所有的div标签变成黑底白字
div{background-color: black;color: white;
}

4、层级选择器：中间是空格

        层级选择器：把span标签里div标签弄成这个样式span div{background-color: black;color: white;}层级：把c1里c2里的div设置成这个样式.c1 .c2 div{background-color: black;color: white;}

5、组合选择器：中间是逗号

    <style>组合选择器：#或者.都可以实现组合#i1,#i2,#i3{background-color: black;color: white;}.c5,.c6,.c7{background-color: black;color: white;}</style>

6、属性选择器：

    <style>        /*属性选择器：把type='text'的设成这个样式*/input[type='text']{width: 100px;height: 200px;}把自定义的n的值为s1的标签设置成这个样式input[n='s1']{width: 100px;height: 200px;}</style>

css选择器设置标签样式相关推荐

CSS选择器(select)
■开发中经常需要找到特定的网页元素进行 ■什么是css选择器设置样式 □按照一定的规则选出符合的元素,为之添加css样式 ■思考:如何找到特 ...
css样式引入方式，及常用设置标签样式
一. 三种样式引入方式 1. 内联式-直接写在div标签中,不推荐用 <div style="color:red;font-size:20px;font-family:'Microso ...
CSS复合选择器，元素的显示模式，CSS背景设置
CSS复合选择器,元素的显示模式,CSS背景设置欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页- ...
CSS（一）：CSS概述、CSS引入方式、CSS优先级、CSS代码格式、CSS属性；CSS选择器；尺寸和颜色单位、背景和文本设置
目录一.CSS 1.1 CSS概述 1.1.1 定义 1.1.2 特征 1.1.3 组织网页的两种常用方式 1.2 引入CSS的四种方式 1.2.1 Style属性方式(内联样式) 1.2.2 St ...
徐志摩题要求：•使用外部引入CSS样式的方式为网页设置样式 •标题使用＜h3＞标签，其他文本均放在段落标签＜p＞中 •使用标签选择器设置标题h3的字体颜色为#ddf111 •使用ID选择器设置p段
徐志摩题要求: •使用外部引入CSS样式的方式为网页设置样式 •标题使用<h3>标签,其他文本均放在段落标签<p>中 •使用标签选择器设置标题h3的字体颜色为#ddf111 • ...
css选择器下划线设置,css中怎么设置字体下划线
css中设置字体下划线的方法:1.使用"text-decoration:underline;"设置下划线样式:2.通过"border-bottom"属性设置下划 ...
Web前端开发笔记——第三章 CSS语言第二节 CSS选择器
目录前言一.CSS选择器 (一)标签选择器 (二)id选择器 (三)类别选择器二.针对标签的选择器嵌套三.集体声明和全局声明 (一)集体声明 (二)全局声明结语前言 CSS代码由选择器和一 ...
《Two Days DIV + CSS》读书笔记——CSS选择器
1.1.2 CSS选择器 CSS 选择器最基本的有四种:标签选择器.ID 选择器.类选择器.通用选择器. [标签选择器] 一个完整的 HTML 页面由很多不同的标签组成,而标签选择器,则是决定哪些标签 ...
python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,"无序列表"的 ...

css选择器设置标签样式

css选择器

css选择器设置标签样式相关推荐

最新文章

热门文章