CSS选择符，组合选择器，数值单位，字体文本属性，列表框架属性

  • CSS样式的位置
    • 内部样式表：写在头部信息里，如：<head> <style type="text/css">样式写在这里</style> </head>
    • 行间样式表：写在html标签里，如<p style="样式写在这里">被CSS处理的字体</p>
    • ​
    • 外部样式表：把CSS样式写在一个单独的*.css文档里然后通过网页调用，如：<head> <link rel="stylesheet" href="css文档路径" type="text/css" /> </head>
  • CSS语法格式
    • CSS的编写格式为:选择符{属性1:值1;属性2:值2;属性n:值n;}，可见CSS语法有三大要素——选择符，属性和值
    • 选择符是指这段代码控制的对象，如id和class：或者HTML的标签，如p，div，body等
    • 属性是指CSS控制对象的各种属性，如文本颜色，对齐方式，宽度和高度等
    • 值就是属性对应的变化程度，如font-size的属性值为12px，14px，16px等
  • 选择符有5种
    • 标签选择符：以HTML已有的标签作为选择符，如：p{width:250px;}，h1{color:#ff0000;}
    • id选择符：标签设置了id属性后可以通过id的不同名字（ps:名字不能以下划线意外的特殊符号和数字开头,一个网页不能出现相同id）来设置不同的样式，在CSS代码中id名字前需要加“#”，如#name{color:#ff0000;}
    • class选择符：标签设置了class属性后可以通过class的不同名字（ps:名字不能以下划线意外的特殊符号和数字开头，名字可以相同）来设置不同的样式，在CSS代码中class名字前需要加“.”，如.name{color:#ff0000;}
    • 伪类选择符：用于超级链接
    • 伪对象选择符：用于超级链接
  • 组合选择器
    • 多标签选择符，如：h1,h2,p,div,span{color:#ff0000;}
    • 包含选择符，如：p span{color:#ff0000;}
    • 子元素选择器，如：p>span{color:#ff0000;},只对p标签中的span一级有效
    • 通配选择符，如：*{marin:0px;}
    • 标签指定选择符，如：p#name{color:#ff0000;}
    • 自有组合选择符，如：p#name h1{color:#ff0000;}
    • 伪类选择符，a:link链接正常状态，a:visited鼠标单击过的链接，a:hover悬停时的状态，a:active点着不松手是的状态
  • CSS颜色和数值单位
    • 颜色有三种表示方法，16进制代码，RGB方法或颜色英文名称，如：color:#ffffff。color:rgb(255,0,0),color:rgb(100%,0,0),color:red
    • 数值单位，像素px，相对文本倍数em，相对文本百分比%
  • CSS字体属性
    • font-size，字体大小
    • font-weight，字体加粗，取值100-900，normal（取消加粗），bold(加粗相当于700)
    • font-style：设置字体样式，italic（斜体）
    • font-family: 设置字体,建议英文的中文字体，如：黑体=>simhei
  • CSS文本属性
    • color，设置文本颜色
    • text-align，文本对齐方式，左对齐left，右对齐right，居中center
    • line-height，行高，如果行高和height的值相同那么文本就会垂直居中，如；div{line-height:40px;height:40px;}
    • text-indent，文本缩进一般用em作为单位，2em缩进2倍的字符距离
    • letter-spacing，字间距
    • text-decoration，文本修饰，下划线underline，上划线overline，删除线line-through，没有none
  • CSS列表属性
    • List-style:none; List-style-type:none; 列表项前面的项目符号去掉。如： ul,li{List-style-type:none;}
  • CSS边框属性
    • border:线宽像素 线型 红色。
    • Border:1px solid red; 同时设置四条边
    • Border-方向（top,right,bottom,left）:1px solid red; 设置一条边的情况。
    • Border-方向（top,right,bottom,left）:none 不要某条边的设置方法。
posted @ 2017-05-09 21:52  安晓宇  阅读(357)  评论(0)    收藏  举报