css3入门

1,css样式:color属性值;background属性值;font属性值;float属性值
2,css非常灵活,既可以嵌入在HTML文档中,也可以是一个单独的外部文件,如果是独立文件,则必须是.css为后缀名

<tittle>我的网页</tittle>
<style type="test/css">
p{
front-size:36px;
color:red;
text-align:center;
}
</style>
</head>
<body>
<p>这是我的第一个网页</p>
</body>
</html>

3,css样式规则:选择器{属性1:属性值1;属性2:属性值2}
①选择器用于指定css样式作用的HTML对象,花括号内是对该对象设置的具体样式,其中,属性和属性值是以“键值对”的形式出现,用英文“:”连接,多个键值对之间用“;”进行区分
②css样式中的选择器严格区分大小写,属性和值不区分大小写,按照书写习惯一般将选择器,属性和值都采用小写的方式
③多个属性之间必须用英文状态下的分号隔开,最后一个属性后的分号可以省略,但是为了便于增加新样式最好保密
④如果属性的值由多个单词组成且中间包括空格,则必须为这个属性值加上英文状态下的引号
⑤在编写css代码时,为了提高代码的可读性,通常会加上css注释
⑥在css代码中空格是不被解析的,花括号以及分号前的空格可有可无
4,css样式表
行内式(内联样式),是指通过标记的style属性来设置元素的样式
<标记名 style=“属性1:属性值1;属性2:属性值2”>内容</标记名>
内嵌式:将css代码集中写在HTML文档的<head头部标记中,并且用<style标记定义
链入式:将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中通过<link/标记将外部链式表文件链接到HTML文档中
5,css基础选择器
a,标记选择器:用HTML标记名称作为选择器,按标记名称分类,为页面中某一类标记指定统一的css样式—标记名{属性1:属性值1;属性2:属性值2;}
b,类选择器:使用“.”(英文标点)进行标识,后面紧跟类名
.类名{属性1:属性值1;属性2:属性值2;}
c,id选择器:使用“#”进行标识,后面紧跟id名
d,#id名{属性1:属性值1;属性2:属性值2;}
通配符选择器:"*",是所有选择器中作用最广泛的,能匹配页面中所有的元素
*{属性1:属性值1;属性2:属性值2;}
e,标签指定选择器(交集选择器):由两个选择器构成,标记选择器和class选择器或id选择器,两个选择器均不能有空格
f,后代选择器:用来选择元素或元素组的后代,把外层标记写在前面,内层标记在后面,中间用空格分隔,当标记发生嵌套时,内层标记就成为外层标记的后代
g,并集选择器:是指各个选择器通过逗号连接而成的,任何形式的选择器都可以作为并集选择器定义的样式完全或部分相同,可利用并集选择器为他们定义相同的样式
6,字体样式属性:font-size设置字号
font-family设置字体—p{font-family:“宋体”;}
font-style设置变体
font-weight用于定义字体的粗细
@font-face用于定义服务器字体

@font-face{
font-family:字体名称;
src:字体路径
}

word-wrap用于长单词和URL地址的自动换行,当word-wrap属性值为break-word时,URL地址会沿边框自动换行
7,文本外观属性:一:color属性用于定义文本颜色,其取值如下:①预定义的颜色值,如red,blue;②十六进制,如r#FF0000,#FF6600,实际工作中,十六进制是最常用的定义颜色的方式③RGB代码,如红色可以表示rgb(255,0,0)或rgb(100%,0%,0%)
二:letter-spacing:用于定义字间距,所谓字间距就是字符与字符之间的空白,其属性值可以为不同单位的数值,允许使用负值,默认为normal
三:word-spacing用于定义英文单词之间的间距,和letter-spacing一样,其属性值可以为不同单位的数值,允许使用负值,默认为normal
四:line-height:用于设置字符行间距,字符的垂直间距,一般称为行高;
常用的属性值单位有三种,分别为像素px,相对值em,和百分比%
五:text-transform:用于控制英文字符的大小写
属性值:none:不转换(默认值)
capitalize:首字母大写
uppercase:全部字符转换为大写
lowercase:全部字符转换为小写
六:text-decoration:用于设置文本的下划线,上划线,删除线等效果
none:没有装饰(正常文本默认值)
underline:下划线
overline:上划线
line-through:删除线
七:text-align:设置文本内容水平对齐
left:左对齐(默认值)
right:右对齐
center:居中对齐
八:text-indent:设置首行文本缩进
九:white-space:设置空白符的处理方式
normal:常规(默认值),文本中的空格,空行无效,满行(到达区域边界)后自动换行
pre:欲格式化,按文档的书写格式保留空格,空行原样显示
nowrap:空格空行无效,强制文本不能换行,除非遇到换行标记
,内容超出元素边界也不换行,若超出浏览器页面也会自动增加滚动条
十:text-shadow:为页面中的文本添加阴影效果
选择器{text-shadow:h-shadow v-shadow blur color;}
text-overflow用于标示对象内溢出的文本
选择器{text-overshadow:属性值;}
常用取值:clip:修建溢出文本,不显示省略标记“…”
ellipsis:用于省略标记“…”标示被修剪文本,省略标记插入的位置是最后一个字符
8:设置省略标记标示溢出文本的步骤:
①为包含文本的对象定义宽度
②应用“white-space:nowrap”样式强制文本不能换行
③应用“over-flow:hidden”样式隐藏溢出文本
④应用“text-overflow:ellipsis;”样式显示省略标记
9:设置多个阴影叠加效果:可以使用text-shadow属性给文字添加多个阴影,从而产生阴影叠加的效果,方法为设置多组阴影参数,中间用逗号隔开;
10:css层叠性和继承性
所谓层叠性是指多种css样式的叠加
所谓继承性是指书写css样式表时,子标记会继承父标记的某些样式,如文本颜色-并不是所有的css属性都可以继承,下面的属性就不具有的继承性
边框属性-定位属性
内/外边距属性-布局属性
背景属性-元素宽高属性
11,对应的权重值:类选择器权重10;id选择器权重100,标签1
特殊情况:继承样式的权重为0;
行内样式优先
权重相同时,css遵循就近原则
css定义了一个!important命令,该命令被赋予最大的优先级
复合选择器的权重为组成他的基础选择器权重的叠加,但是这种叠加并不是简单的数字之和;

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值