Css学习笔记(二)

   日期:2024-12-26    作者:tenenghg1 移动:http://3jjewl.riyuangf.com/mobile/quote/46318.html
color:文本颜色

color属性用于定义文本颜色,其取值方式由3中
1,预定的颜色值,如red,green,blue等
2,十六进制,如#FF0000, #00FF00等,实际工作中十六进制最为常见
3,RGB代码,红色可以表示为rbg(255,0,0)

Css学习笔记(二)

line-height:行间距

line-height属性用于设置行间距,就是行与行之间的距离,即字符的垂直间距,一般为行高,line-height 常用属性值由三种分别是像素px,相对值em
和百分比,一般用的最多的是px。

text-align:水平对齐方式

text-align属性用于设置文本内容的水平对齐,相当于html中的aglin对其属性。可使用值如下
left : 左
center:中
right: 右

text-indent :首行缩进

text-indent属性踊跃设置首航文本的缩进,其属性值可为不同单位的数值,em字符宽度的倍数,或者相对于浏览器窗口宽度的%,允许使用负值,建议使用em为单位
1 em 就是一个子的宽度,如果是汉字 1em 就是一个汉字的宽度

letter-spacing: 字间距

letter-spacing属性是用来定义字间距(字符与字符之间的空白)其属性值可为不同单位的数值,允许使用负值,默认值为normal

word-spacing: 单词间距

用于定义英文单词之间的距离,对中文字符无效鳍鱼和lettet-spacing一样

word-break :自动换行

normal 受用浏览器默认的换行规则
break-all 允许在单词内换行
keep-all 只能在半角空格或者连字符处换行

颜色半透明(css3

在css3 我们可以采取如下的语法来使文字半透明

 
文字阴影(css3
 
 
内部样式表

内嵌式式将css代码集中卸载HTML文档的head头标签中,并用style标签定义,基本语法如下

 

语法里,style标签位于head标签中,title标签后,也可以放在HTML文档的任何地方, type="text/CSS 在HTML5中可以省略。

行内式(内联样式

内联样式,又称行内样式,行间样式,内嵌样式,是通过标签的style属性来设置元素的样式,基本语法如下

 

内联样式 适用于比较少的情况

外部样式表(外链式

嵌入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中,基本语法如下

 

这个link是个单标签,且link必须放到head标签中而且得指定3个属性
href:定义锁连接到外部样式表文件的URL,可以是相对或者绝对路径

type:定义所连接的文档类型,type="text/CSS 表示为连接的外部文件为css样式表

rel:定义当前文档与被链接的文档之间的关系,styleheet表示被连接文档是个样式表文件

三种样式表的总结
块级元素

每个块级元素通常都会独自占据一整行躲着多整行,可以对其设置宽度,高度,对齐等属性,常用于网页布局和网页结构搭建

常见的块级元素由 h1-h6 ,p ,div,ul,ol,li 其中div是最典型的块级元素

块级元素的特点

1,总是从新行开始
2,高度,行高,内外边距都是可以控制的
3,宽度默认是容器的100%
4,可以容纳内联元素和其他块级元素

行内元素(内联元素

行类元素 不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度,高度,对齐等属性,常用于控制页面中文本的样式
常见的行内元素有 a,trong ,b ,em ,i ,u, span 等 其中以span为典型

行内元素的特点
1,和相邻的行内元素在同一行上
2,高,宽无效,但是水平方向的padding和margin可以设置,垂直方向的无效
3,默认宽度就是它本身内容的宽度
4,行内元素只能容纳文本或者其他行内元素 (a特殊

注意
1,只有文字才能组成段落,因此P里面不能放块级元素,同理还有标签h1-h6 dt他们都是文字类块级标签,里面能不能放其他块级元素

行内块元素

在行内元素中有几个特殊标签可以对他们的设置宽度和对其属性,他们可以成为行内块元素

行内块元素的特点
1,和相邻的行内元素(行内块)在一行上,但是之间会有空白缝隙
2,默认宽度就是它本身的宽度
3,高度,行高,外边距以及内边距都可以控制

标签显示模式转换display

块转行类: display:inline
行内砖块:display :block;
块 行内元素转为行内快元素:display:inline-block

复合选择器是由两个或多个基础选择器,通过不同的方式组合而成,目的是为了可以选择更准确更精细的目标元素标签

交集选择器
并集选择器

记忆技巧
并集选择器 是和的意思,就是说只要是逗号隔开的 ,所哟胡选择器都会执行后面的样式
比如,一般一行写一个,方便阅读

后代 选择器
 
子元素选择器
属性选择器
 
伪元素选择器

1,E::first-letter 文本的第一个单词或字(如中文,日文,韩文等
2,E::first-line 文本第一行
3,E::selection 可改变选中文本的样式
4,E::before 和E::after 在E元素内部开始的位置和结束位置创建一个元素
该元素为行内元素,必须要结合conten属性使用


特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


举报收藏 0评论 0
0相关评论
相关最新动态
推荐最新动态
点击排行
{
网站首页  |  关于我们  |  联系方式  |  使用协议  |  隐私政策  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号