CSS的选择器和常用样式（id，class,组合，字体，背景，宽度，高度，颜色等CSS样式）

最新推荐文章于 2022-08-15 15:16:37 发布
最新推荐文章于 2022-08-15 15:16:37 发布
阅读量2k 收藏 2
点赞数 1
分类专栏： 前端学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wyqwilliam/article/details/83758449
版权 
<html>
	<head>
		<title>CSS的选择器和常用样式</title>
		<meta charset="UTF-8"/>
		<!--声明css代码域-->
		<style type="text/css">
			/*ID选择器*/
			#div01{
				background-image: url(img/1.jpg);
			}
			
			/*标签选择器*/
			/*div{
				background-color: bisque;
			}*/
			/*类选择器*/
			.common{
				background-color: orange;
			}
			/*组合选择器*/
			#div01,#ta,p{
				border:  1px;
				width: 300px;
				height: 300px;
			}
			/*子选择器*/
			div>b{
				font-family: 萝莉体 第二版;
				color: red;
			}
			/*属性选择器*/
			input[name=uname]{
				color: red;
			}
			/*常用样式*/
				#showdiv{
					border: solid 1px;/*边框样式*/
					/*大小样式*/
					width: 300px;
					height: 300px;
					/*字体样式*/
						font-size: 20px;
						font-family: 萝莉体 第二版;
						font-weight: bold;
						font-style: italic;
						color: red;
					/*背景颜色*/
						background-color: antiquewhite;
					/*背景图片*/
						background-image: url(img/1.jpg);
						background-size: cover;
						background-repeat: no-repeat;
					/*内容居中显示*/
						text-align: center;
				}
				a{
					text-decoration: none;
				}
				li{
					list-style: none;
					float: left;
				}
		</style>
	</head>
	<!--
		CSS的选择器:
			(基础选择器)
			ID选择器：
				作用：针对性给某个标签添加样式
				#id名{样式名:样式值;样式名:样式值;....}
			标签选择器：
				作用：给某一类型的标签添加公共样式
				标签名{样式名:样式值;样式名:样式值;....}
			类选择器
				作用：给不同的标签添加公共样式
				先声明类选择器，然后在标签上使用class属性引入类样式
				.类选择器名{样式名:样式值;样式名:样式值;....}
			(了解)
			组合选择器：
				基础选择器,基础选择器,基础选择器...{样式名:样式值;样式名:样式值;....}
			子选择器：
				基础选择器>基础选择器{样式名:样式值;样式名:样式值;....}
			后代选择器：
				基础选择器  基础选择器{样式名:样式值;样式名:样式值;....}
			属性选择器
				标签名[属性名]{样式名:样式值;样式名:样式值;....} 
				标签名[属性名=值]{样式名:样式值;样式名:样式值;....} 
		css的常用样式：
			边框样式：
				border:solid 1px;
				border-top:样式值;
				border-left:样式值;
				border-right:样式值;
				border-bottom:样式值;
			大小样式：
				width:样式值
				height:样式值
			字体样式:
					font-size: 40px;
					font-family: 萝莉体 第二版;
					font-weight: bold;
					font-style: italic;
					color: red;
			背景颜色样式：
				background-color: antiquewhite;
			背景图片样式：
					background-image: url(img/1.jpg);
					background-size: cover;
					background-repeat: no-repeat;
			内容居中
				text-align: center;
			其他样式	
				text-decoration: none; 去除超链接的下划线
				list-style: none;去除li标签的顺序符号
				float: left;左浮动
				
				
	-->
	<body>
		<h3>CSS的选择器和常用样式学习</h3>
		<hr />
		<div id="showdiv">
			今天学习了CSS，好简单
			<a href="http://www.baidu.com">百度一下</a><br />
			<ul>
				<li>苹果</li>
				<li>苹果</li>
				<li>苹果</li>
			</ul>
		</div>
		<br />
		<div id="div01">
			我是div01
			<b>哈哈</b>
			<div id="">
				<b>嘿嘿</b>
			</div>
		</div>
		<b>呵呵</b>
		<div id="div02">
			我是div01
		</div>
		<table border="1px" cellspacing="0" cellpadding="10px" class="common" id="ta">
			<tr><th>Header</th></tr>
			<tr><td>Data</td></tr>
		</table>
		<p class="common" id="p1">
			我是段落
		</p>
		<hr />
		<input type="text" id="" value="" />
		<input type="text" name="" id="" value="" />
		<input type="text" name="uname" id="" value="" />
		
	</body>
</html>

 

道法—自然
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css复杂选择器及css字体样式、颜色属性详解
12-28
之前学习了css的一些基础选择器，然而今天要介绍css的复杂选择器，复杂选择器一共有三种 1.父子（派生）选择器 234 123 此时要使234有颜色，需要用到父子选择器，虽说用之前的标签选择器可以让它有颜色，但是123也会有颜色，所以用到为父子关系的父子选择器，这样就可以精确的让234变色而不使123变色，使用的方法就是父级标签+空格+子级标签，例如 div strong em{
css元素定位：通过元素的标签或者元素的id、class属性定位
caixiangting的博客
09-06 8356
大部分人在使用selenium定位元素时，用的是xpath元素定位方式，因为xpath元素定位方式基本能解决定位的需求。xpath元素定位方式更直观，更好理解一些。css元素定位方式往往被忽略掉了，其实css元素定位方式也有它的价值；相对于xpath元素定位方式来说，
前端自学第4天
Byfsky的博客
09-03 158
自学前端（第四天） html先告一段落，接下来开始css的学习。 CSS简介 CSS基础选择器 CSS字体属性 CSS文本属性 CSS的引入方式 综合案例 Chrome调试工具 1.CSS简介 CSS的主要使用场景就是美化网页，布局页面的。 CSS是层叠样式表的简称。 有时我们也会称之为CSS样式表或级联样式表。 CSS也是一种标记语言。 CSS最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构(HTML)与样式（CSS）相分离 CSS语法规范 使用html时，需要遵从一定的规范，CSS也是如
CSS所有属性集合
qq_68718978的博客
07-14 2287
css3的基本元素都在这儿啦！
2、CSS id选择、类选择器
zhengqiqiqinqin的专栏
02-25 439
<!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>id.
标签名选择器、id选择器、class类型选择器、组合选择器
weixin_46065214的博客
08-15 2787
标签名选择器、id选择器、class类型选择器、组合选择器
day11笔记
m0_60147773的博客
08-16 103
day11笔记 一、宽高自适应 1、概念：网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应 元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。 2、宽度自适应 + width:auto; 和不设置宽度效果是一样的，根据块级元素的特性来使用的 + 外层元素使用百分比单位，百分比单位需要参照物 3、高度自适应 + height:auto; 和不设置高度效果是一样的，高
老生常谈jquery id选择器和class选择器的区别
12-12
实例如下： <!...<...link href="style.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css"/> [removed][removed] <script type="text/javascript
四种CSS常用的选择器使用方法和注意事项
12-04
本文为大家分享了CSS中常用的四种选择器，供大家参考，具体内容如下 1、类选择器（class选择器） 基本使用：  .类选择器{  属性名: 属性值;  …  } 案例： CSS Code复制内容到剪贴板 /*类选择器*/  .s1{  ...
jQuery修改class属性和CSS样式整理
12-12
　用类选择器规定样式的时候,需要为元素指定类名,即class属性的值. 　注意每个HTML元素只有一个class属性.但是class属性的值可以是多个名称,即可能包含一个词的列表,中间用空格分隔. 　具体使用方法见:...
该不该使用ID选择器？浅谈对CSS的ID选择器的使用建议
01-19
关于ID选择器和class选择器不同，这里使用#class的值不同标签可以发生重复。但是id不允许！！！id选择器不能结合使用id属性通常和js配合使用 CSS Code复制内容到剪贴板 #label { background-color: red; }  ...
选择器 字体 文本 背景属性
weixin_30667649的博客
08-19 163
CSS选择器(Cascading Style Sheet，层叠样式表) css代码写法: h1{color:red;} 选择器{css属性:属性值;} css代码引入 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css...
通过选择器改变字体颜色
qq_25409587的博客
10-12 1346
"1.0" encoding="utf-8"?> "http://schemas.android.com/apk/res/android"> "true" android:color="@color/color_text_selected"/> "false" android:color="@color/color_text_normal"/> i
css引入+选择器+css部分样式（文字，文本，背景）
weixin_33937778的博客
06-18 277
一、 css引入方式（三种）1、内联：在标签中设置style属性<标签名 style=“样式1：样式值2；样式1：样式值2”><标签名> 如：<a style ="color：red； font-size=20px；" </a>2、内嵌：在head标签中加入style标签 <style> 选择器1{ 样式1：样式值1； 样式1：样...
[jQuery][css]通过$("#id").width();设置元素宽度在火狐无效
我是涛锅
05-11 2132
类似如下代码，chrome下正常，可是在Firefox却总是不对$("#id").width(100);解决方案：$("#id").css('width','100px');
转 CSS的组合和嵌套 id class, 点， #
SlimApp
11-25 3016
转 CSS的组合和嵌套 id class, 点，# CSS的组合和嵌套2007年04月27日 星期五 上午 8:58 CSS的组合和嵌套 组合 你不必重复有相同属性的多个选择符，你只要用英文逗号（,）隔开选择符就可以了。 比如，你有如下的代码： h2 { color: red; } .thisOtherClass { color: red; } .yetAnotherClass {
CSS选择器的用法及常见属性
dddddrrrzz的博客
05-09 2486
目录一、CSS基本语法规范二、引入方式2.1 内部样式表2.2 内联样式2.3 外部样式--实际开发中用的最多三、代码风格3.1 样式格式3.2 样式大小写3.3 空格规范四、选择器4.1 选择器的种类4.2 基础选择器1. 标签选择器2. 类选择器3.id选择器4.通配符选择器4.3 复合选择器1. 后代选择器把 `ol` 中的 `li` 修改颜色, 不影响 `ul`代码示例: 元素 2 不一定非是 儿子, 也可以是孙子.可以是任意基础选择器的组合. (包括类选择器, id 选择器）2. 子选择器3.并集
css样式优先级问题
未曾远去
03-26 2044
官方表述的CSS样式优先级如下：通用选择器（*） &lt; 元素(类型)选择器 &lt; 类选择器 &lt; 属性选择器 &lt; 伪类 &lt; ID 选择器 &lt; 内联样式 CSS 伪类用于向某些选择器添加特殊的效果属性选择器可以根据元素的属性及属性值来选择元素。 那么，我们来举个例子：html代码：&lt;div class="img-div"&gt; &lt;img src="...
如何根据元素的id、class、标签名、xpath或css选择器等方式定位元素。
最新发布
04-11
您可以使用以下方式定位元素： 1. 根据id定位元素：driver.find_element_by_id("元素id") 2. 根据class定位元素：driver.find_...5. 根据css选择器定位元素：driver.find_element_by_css_selector("css选择器")

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值