CSS基础2

CSS2

1.CSS中常用的属性设置

css格式:    选择器{css属性名称:属性值;}

选择器--从htm文件中选中自己需要添加样式的html元素。

1.元素选择器---根据html元素的名称选中被控制的html标记。

2.id选择器--根据给html标记设置的id属性来选中被控制的html标记。

如果要使用id选择器那么首先需要给html标记去设置id属性。

3.类【class】选择器---根据给html标记设置的class属性来选中被控制的html标记。

如果要使用类【class】选择器那么首先需要给html标记去设置class属性。

4.包含选择器--选择所有被父元素包含的子元素。

5.属性选择器--根据html标记的属性来选中被控制的元素

    1.元素 [属性名称] { sRules }:选择具有某个属性的元素

    2.元素 [属性名称 = value【属性值】 ] { sRules }:选择具有某个属性且属性值等于 value 的元素

6.子元素选择器---选择所有作为E1子对象的 E2

选择器分组----将同样的样式应用于多个选择器选中的元素上。不同的选择器之间使用“,”分割。

注意:css的选择器在使用的时候,不是单一去应用,而是通过不同的组合形式来使用。

1.1.关于字体的css属性设置

color--设置字体颜色[颜色单词/颜色码【#0000ff】]

font-family---设置字体名称[黑体.....]

font-size --设置字体大小【数字px】

font-style--设置字体倾斜【normal | italic | oblique 】

font-weight--设置字体粗细【整百的数字【100~900】】

text-decoration--设置字体的修饰线【none || underline下划线 || overline上划线 || line-through贯穿线 】

text-shadow--文本的文字是否有阴影及模糊效果

text-transform--文本的大小写转换【none | capitalize | uppercase | lowercase 】

line-height--行高【数字px】

letter-spacing--文字之间的间隔 normal | length 【数字px】

word-spacing--单词之间插入的空隔normal | length 【数字px】

例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关于字体的css属性设置</title>
		<style>
			p{
				color:red;
				font-family:楷体;
				font-size:30px;
				font-style:italic;
				font-weight:900;
				text-decoration:underline;
				text-transform:uppercase;
				letter-spacing:10px;
				word-spacing:20px;
				text-shadow:10px 10px 20px red;
				line-height: 30px;
			}
		</style>
	</head>
	<body>
		<h1>关于字体的css属性设置</h1>
		<h2 >color--设置字体颜色[颜色单词/颜色码【#0000ff】]</h2>
		<h2>font-family---设置字体名称[黑体.....]</h2>
		<h2>font-size --设置字体大小【数字px】</h2>
		<h2>font-style--设置字体倾斜【normal | italic | oblique 】</h2>
		<h2>font-weight--设置字体粗细【整百的数字【100~900】】</h2>
		<h2>text-decoration--设置字体的修饰线【none || underline下划线 
		|| overline上划线 || line-through贯穿线 】</h2>
		<h2>text-shadow--文本的文字是否有阴影及模糊效果</h2>
		<h3>text-shadow:10px 0px 0px red;</h3>
		<h3>第一个值:水平移动距离 0px 0px red;</h3>
		<h3>第二个值:前后移动距离 0px 0px red;</h3>
		<h3>第三个值:模糊效果</h3>
		<h3>第四个值:阴影颜色</h3>
		<h2>text-transform--文本的大小写转换【none | 
		capitalize | uppercase | lowercase 】</h2>
		<
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值