css的一些应用(三)

文本-列表-表格-相关等

-------------文本文字相关-------------

将首行文字进行缩进：text-indent ：100px； 正的右缩进，负的左缩进，网站LOGO上会用到
针对seo优化的。
去除文本下划线：list-style:none
css文本文字修饰为无，去除链接下划线，下划线无颜色：text-decoration:none;

去掉对象加粗：font-weight:normal

文字字体加粗：font-weight:bold
-----bold:可以换成数字  500,600，。。。900 都可以，代表加粗的程度

让字体在文本框内，上下，左右居中：
text-align:center -------文本左右居中
height: 50px; line-height:50px ------上下居中，需要把line-height设置成和文本框一样的高度


如何在文本或者表格或者内容前面，后面插入或者添加内容 ：
before 选择器:在某元素之前插入新的内容，可以是文本，是图片，
等等 都在后面css里进行设置
在每个 元素的内容之前插入新内容：
    p:before{ content:"台词：";}

    after 选择器：在某个元素之后插入内容
    在每个 元素的内容之后插入新内容：
    p:after{content:"台词：";}

    文字下划线位置：
    text-decoration: overline  ----------下划线在文字上面
    text-decoration: line-through -------------下滑线在文字中间
    text-decoration: underline       --------------下划线在文字下面
    text-decoration:blink                --------------无下滑线
    text-decoration: none               --------------这是连接无下划线

    让文本 不换行
    white-space: nowrap


    --------------表格样式------------
    去除列表格式 即可以去除列表前面的点或者圈圈:list-style: none

鼠标样式修改

:这里是文字内容这个cursor:pointer可放到外链CSS文件里头去

鼠标相关操作

关于鼠标移动的一些方法

某某元素：hover{}：鼠标移动产生效果，括号里填值如：背景颜色 字体大小等等
background-position:-20px -50px :表示图片向 左移动20px   向上移动50px
cursor: pointer-------当鼠标指向这个元素时变成手的形状

ul > li:hover{background-color:#005FA9;} 鼠标移入li标签时背景变了
ul > li:hover > a{color:#FFFFFF; } 鼠标移入 li标签时  a标签字体也跟着变化

本文为Jsky原创文章,转载无需和我联系,但请注明来自Jsky博客 www.tjin.link

• 上一篇： css的一些应用(三)
• 下一篇： css的一些应用(二)