今天整理出了一些HTML CSS 样式笔记

line-height:30px;行高
letter-spacing:2em;字间距
color:#ff0000;颜色
font-size: 18px;字号大小
font-family: "宋体";字体类型
font-style: italic;斜体 字体风格
font-weight:bold;加粗 
font:italic bold 18px/1em 黑体;
text-align:left/center/right;对齐方式
text-indent: 2em;首行缩进
text-align: center;文字居中
float: right;left;。。浮动
text-decoration:overline;定义文本上一条线
             line-through;定义穿过文本下的一条线
             underline;定义文本下一条线
text-transform:capitalize;文本中的每个单词以大写字母开头
           uppercase;定义仅有大写字母
           lowercase;定义无大写字母,仅有大写字母
<字体属性的顺序:风格->粗细->大小->类型
font:italic bold 14px 宋体,serif;>


<!-- a:link{}没有点击这个超链接的时候样式 -->
<!-- a:visited{}设置已经访问过的a标签的样式 -->
<!-- a:hover{}当鼠标悬浮(放在a标签文字)时的样式 -->
<!-- a:active{}当鼠标点下去没有松开的时候的样式 -->
<!-- 注意:伪类是有顺序的 a:link{}>a:visited{}>a:hover{}>a:active{} -->


网页背景设置
 /*solid 边框线*/
            /*background-color 标准背景颜色*/
            /*单词表示法
            如red blue green
            16进制法
                #加8个16进制的数
                rgb/rgba
                    rgb三原色 a透明度*/
 /*导入一张图片作为背景
 url('相对路径')*/
 /*background-image:url;*/
 /*repeat 沿xy轴平铺 默认形式
 repeat-x 只沿x平铺
 repeat-y 只沿y平铺
 no-repeat 不平铺*/
 /*auto 默认值使用背景图片
 cover 整个背景图片放大充斥本元素*/
 /*contain 保持图片的本身宽高缩放首进*/(背景等比例缩放)
 /*background-size*/背景尺寸(不同取值的作用)
 /*!*background-position 背景图位置*!*/
 /*1.两个像素值 如:*/
 /*background-position: 1px 1px;*/
 /*2.两个百分比 如:*/
ackground-position: 50% 50%;*/
 /*3.用关键词
 background-position right top;*/
 /*第一个#c00 16进制背景颜色设置*/
 /*第二个 url("图片相对地址")*/
/*第三个 50px 50px 背景图片位置*/
/*第四个 no-repeat 设置背景不平铺*/
/*background-position: right top;*/
/*background-repeat: no-repeat;*/
/*background-size:cover;*/
/*background: #c00 url("") image/icon;*/

background: #171516;
            /*背景颜色黑色*/

        }
        li{
            list-style-type:none;
            /*去掉li里面的小黑点*/
            display: inline-block;
            line-width:50px;

        }
        a{
            color:white;
            /*超链接里的字为白色*/
            text-decoration: none;
            /*去掉下划线*/
        }
        .a hover{
            text-decoration: underline;文本的装饰<下划线>
        }
/*图片与文字的对齐方式
                 top :垂直居上
                 middle: 居中
                 bottom:居下
                 */
            vertical-align: middle;

        a:hover{
            color: pink;
            /*鼠标移到上边时的颜色*/
        }

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值