CSS的基本概念及文字属性、段落属性、背景属性、列表案例符号的样式

一、 CSS的基本概念
1.CSS是层叠样式表(Cascading Style Sheet) ,用于控制网页的外观。指颜色 背景 大小元素定位。
Css选择器:css选择器,也称为选择符,用于选择需要添加样式的元素
css的基本语法:
选择器{
属性:属性值; (样式规则:键值对)
…}
2.全局选择器 通配符 通用 权重 0
全局选择器:设置所有标签使用同一样式,用表示
全局选择器语法:
{}
html代码:

<h1>我是标题红色</h1>
<p>我是段落红色</p>

css代码:
*{ color:red;} 结构和样式分离:分工明确,操作简单!
显示效果:

3.组合选择器:
H1,h2,h3,h4,h5,p{
}
h.special,special,#one{
text-decoration:underline;//下划线
}
4.后代选择器:

<style id="my">
			/*查找p元素的后代span元素  空格就是后代*/
			p span{
				color: green;
			}
			i span{
				color: red;
			}
			.pcolor #my{
				color: lightskyblue;
				font-size: 50px;
			}
		</style>

<p id="my" class="pcolor">段落1</p>
		<p class="pcolor"><span id="my">后代元素</span></p>
		<p>段落2</p>
		<p>开心<span>y<i>u<span>yang</i></span></span>快乐</p>

5.子元素选择器:
语法:

    选择器1>选择器2>…{
//样式规则
}
<style type="text/css">
			p>i{
				color: red;
			}
		</style>
<p>lalal</p>
		<p>不<i>爱你</i></p>

嵌套选择器:

选择器1 选择器2{….}
P b{
Color:bule;
}
<p>嵌套使<b>用<b>CSS</b></b>标记的方法</p>
嵌套之外的<b>标记</b>不生效

6.标签选择器 元素选择器 权重 1
标签选择器:用于声明标记采用的样式。
例如,p选择器用于声明所有p标签的样式,同样也可用h1选择器来声明页面中所有h1标签的样式。
标签选择器的语法:

E                      Selector{
{                          property:value1;
                            property:value1;
样式规则        
}  

特点:选择的面比较广,不是最灵活。可以对多个标签同事进行组合声明 }
p{}直接给标签设置样式的就是标签选择器
显示效果:

html代码:

<h1>我是标题红色</h1>
<p>我是段落红色</p>
<p>我是段落红色</p>
<p>我是段落红色</p>

css代码:

 p{ color:red;}
p,h1{color:red;}

7.类选择器 样式名选择器 权重 10
类选择器:class 用来为一系列标签定义相同的样式。
例如:当声明了p标签为红色时,页面中的所有p标签都显示为红色,如果希望其中的几个不是红色,就需要使用类别选择器 。
类选择器的语法: E.类名{样式规则}
显示效果:

执行步骤
在网页中书写css代码:

.red{ color:red;}

给h1标签和第三个p标签引入类别选择器red, html代码:

<h1 class="red">我是标题红色</h1>
<p>我是段落红色</p>
<p>我是段落红色</p>
<p class="red">我是段落红色</p>

特点:一个元素可以使用多个类选择器,不同的规则可叠加,可穿两个样式,相同的功能看优先级ÿ

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值