分享好友 最新动态首页 最新动态分类 切换频道
Css学习笔记(二)
2024-12-26 17:54
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属性使用

最新文章
php实现动态口令认证(谷歌身份验证器)
PHP Google 身份验证器演示这并不是一个功能齐全的应用程序。 仅演示如何将 Google Authenticator 移动应用程序与您的网站一起用作 2 因素登录系统或一次性密码。 这个简单的 PHP 脚本演示了使用 PHP 实现 Google Authenticator。 要使用此
每日凌晨对注册建造师专业、数量进行自动比对!该省住建厅发文
点击上方蓝字 关注我们 了解更多精彩12月11日,河北省住建厅发布关于公开征求《关于建立资质常态预警和动态核查机制加强全省建筑业企业资质批后监管的通知(征求意见稿)》意见的公告。自动比对+预警!(一)常态比对依托河北省建筑市场监
首发解析:网站资源优化理论与实战全面指南
  在互联网时代,网站资源优化已经成为了一个不可忽视的重要环节。一个优化得当的网站不仅可以提高用户体验,还能有效提升搜索引擎排名,从而带来更多的流量和转化。本文将从理论到实践,全面解析网站资源优化的关键要素和具体步骤。  
我在东南亚卖潮玩,暴赚几千万
涌现的财富吸引着越来越多的掘金玩家,主做玩具婴童展的小肖印象很深刻,越来越多的潮玩企业开始出海。饭后,阿黎随手给了妈妈一张存款几十万的银行卡,“你拿着花,从今天开始钱能解决的问题,不是问题了”。在讲述时,85后阿黎依然难掩当
——优化SEO,提升网站排名与流量
版权声明:图片来源网络,仅做分享之用!侵权请联系删除。我们需要了解SEO的基本概念和原理,SEO(Search Engine Optimization)是指通过一系列策略和技巧,使网站在搜索引擎中获得更好的排名,从而吸引更多的流量,这些策略包括关键词选择
聚焦微博,实现精准软件推广
在微博中大v的众多,往往可以做到一呼百应,所以通过与大v合作来发布软件内容,会有更大的曝光量,那么成功率也会上涨。当然这种方式也不是一定顺风顺水,还需要付出一定的成本。四、成为大v成为大v并不是件易事,需要慢慢“养号”,以及学
wps怎么添加边框
WPS是一款功能强大的办公软件,广泛应用于文档处理和表格制作。在WPS中,添加边框是一个常见的操作,无论是为了美化文档,还是为了突出某些内容,边框都能起到很好的作用。下面,我们就来详细介绍一下如何在WPS中添加边框。一、为WPS表格添
五个招数告诉你怎么让网站内容快速让百度收录
当我们做好一个网站并发布了,那我们要怎么做才能让我们的网站被搜索引擎收录呢?那我们的网站就要符合搜索引擎的收录规则才可以,那我们要怎么做才符合搜索引擎的收录规则呢? 一、提交网站地图 我们每天更新好站内文章之后,要
【E760360清理大师下载】天语E760360清理大师8.4.2免费下载
清理大师:更简单,更畅快!6亿用户信赖的手机清理!清理大师是一款完全免费的手机加速与空间清理软件,强力加速使手机运行更流畅,一键清理快速解决空间不足问题。【一键清理】一键搞定无用垃圾,手机清理更省心【手机加速】瞬间释放手机
“十大战略”进行时丨勇担重任 勇毅前行
  开栏的话   锚定“两个确保”、实施“十大战略”,是省第十一次党代会作出的重大决策。全省上下以“能力作风建设年”活动为抓手,踔厉奋发、攻坚克难、勇毅前行,推动经济社会健康发展。即日起,本报开设“‘十大战略’进行时”专栏
相关文章
推荐文章
发表评论
0评