• 欢迎访问夜影小窝网站,WordPress信息,WordPress教程,网络技术,有趣代码,安防智能化,欢迎加入夜影小窝 QQ群
  • Git主题现已支持滚动公告栏功能,兼容其他浏览器,看到的就是咯,在后台最新消息那里用li标签添加即可。
  • 最新版Git主题已支持说说碎语功能,可像添加文章一样直接添加说说,新建说说页面即可,最后重新保存固定连接,演示地址
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏夜影小窝吧

自学CSS技术(三)

WEB技术 yyhouse 7个月前 (04-25) 1227次浏览 已收录 2个评论 扫描二维码

CSS 文本格

文本颜色
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定:
十六进制值 – 如: #FF0000
一个RGB值 – 如: RGB(255,0,0)
颜色的名称 – 如: red

body {color:red;} 定义整个文本为红色,在没有特殊定义下都为红色
h1 {color:#00ff00;}定义h1为绿色
h2 {color:rgb(0,0,255);}定义h2为蓝色

文本的对齐方式属性是text-align

文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.
当text-align设置为”justify”,每一行被展开为宽度相等,左,右外边距是对齐(如杂志和报纸)。

h1 {text-align:center;}文本居中
p.date {text-align:right;}文本居右
p.main {text-align:justify;}每一行被展开为宽度相等,左,右外边距是对齐

文本修饰 text-decoration属性

text-decoration 属性用来设置或删除文本的装饰。

a {text-decoration:none;}没有线条
h1 {text-decoration:overline;}上面带线条
h2 {text-decoration:line-through;}文字中间带线条
h3 {text-decoration:underline;}下面带线条

文本转换text-transform

p.uppercase {text-transform:uppercase;}全部大写
p.lowercase {text-transform:lowercase;}全部小写
p.capitalize {text-transform:capitalize;}首字母大写

CSS 字体font-family 属性设置文本的字体系列。

CSS字体属性定义字体,加粗,大小,文字样式。
font-family 属性应该设置几个字体名称作为一种”后备”机制,如果浏览器不支持第一种字体,他将尝试下一种字体。
注意: 如果字体系列的名称超过一个字,它必须用引号,如Font Family:”宋体”。
多个字体系列是用一个逗号分隔指明:

字体样式font-style

主要是用于指定斜体文字的字体样式属性。
这个属性有三个值:
正常 – 正常显示文本
斜体 – 以斜体字显示的文字
倾斜的文字 – 文字向一边倾斜(和斜体非常类似,但不太支持)

p.normal {font-style:normal;}正常
p.italic {font-style:italic;}斜体常用
p.oblique {font-style:oblique;}斜体

字体大小font-size 属性设置文本的大小。

字体大小的值可以是绝对或相对的大小。
绝对大小:
设置一个指定大小的文本
不允许用户在所有浏览器中改变文本大小
确定了输出的物理尺寸时绝对大小很有用
相对大小:
相对于周围的元素来设置大小
允许用户在浏览器中改变文字大小
如果你不指定一个字体的大小,默认大小和普通文本段落一样,是16像素(16px=1em)也可以使用em定义文字大小。

h1 {font-size:40px;}字体大小40
h2 {font-size:30px;}字体大小30
p {font-size:14px;}字体大小14
所有CSS字体属性
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。

CSS 列表ul和ol

在HTML中,有两种类型的列表:
ul无序列表 – 列表项标记用特殊图形(如小黑点、小方框等)
ol有序列表 – 列表项的标记有数字或字母

不同的列表项标记,list-style-type属性指定列表项标记的类型

ul.a {list-style-type: circle;}无序标记前面圆圈
ul.b {list-style-type: square;}无序标记前面方框
ol.c {list-style-type: upper-roman;}有序罗马字符
ol.d {list-style-type: lower-alpha;}有序abc标记

list-style-image作为列表项标记的图像

ul{list-style-image: url('sqpurple.gif');}用图片作为无序标记
所有的CSS列表属性
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。

表格边框,使用border属性

<th>:定义表格内的表头单元格。此th元素内部的文本通常会呈现为粗体。
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开:
table
{
    border-collapse:collapse;边框属性折叠成一个单一的边框或隔开
}

table, th, td
{
    border: 1px solid black; 定义边框为黑色边框, 
}

请注意,在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。

表格宽度和高度Width和height属性定义表格的宽度和高度。

下面的例子是设置100%的宽度,50像素的th元素的高度的表格:
table {width:100%;}
th{height:50px;}

表格填充如果在表的内容中控制空格之间的边框,应使用td和th元素的填充属性:

td{padding:15px;}15像素的填充

表格颜色

下面的例子指定边框的颜色,和th元素的文本和背景颜色:
table, td, th{border:1px solid green;}定义实线绿色表格
th{background-color:green;color:white;}定义除表头外所有为绿框白色字
边框线条属性边框线的类型有九个确定值:none(无边框线)、 dotted(由点组成的虚线)、 dashed(由短线组成的虚线)、 solid(实线)、 double(双线,双线宽度加上它们之间的空白部分的宽度就等于border-width定义的宽度)、 groove(3D沟槽状的边框)、 ridge(3D脊状的边框)、 inset(3D内嵌边框,颜色较深)、 outset(3D外嵌边框,颜色较浅)

夜影小窝 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:自学CSS技术(三)
喜欢 (3)
[327982852@qq.com]
分享 (0)
yyhouse
关于作者:
90后,从事弱电安防智能化工程,包含监控系统,楼宇对讲系统,LED系统,广播音箱系统,停车场系统,楼宇对讲系统喜欢分享捣鼓有趣的代码。。。
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 简单易懂lu duo
    高山2019-04-25 21:45 回复 Mac OS X | 未知浏览器
    • yyhouse
      测试下评论功能
      yyhouse2019-05-02 09:46 回复 Windows XP | Chrome 63.0.3239.132
×
订阅图标按钮