HTML+CSS基础篇(三)——CSS样式基础

来源：互联网发布：球球大作战小糖果软件编辑：程序博客网时间：2024/06/05 02:38
CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。选择器{    样式;}一、css三种样式方法1、内联式css样式，直接写在html标签中<p style="color:red;font-size:12px">这里文字是红色。</p>【注意】如果有多条css样式代码设置可以写在一起，中间用分号隔开2、嵌入式css样式，写在当前的文件中<style type="text/css">span{color:red;}</style>3、外部式css样式，写在单独的一个css文件中<link href="base.css"  rel="stylesheet"  type="text/css" />4、三种方式的优先级对比(默认三种权值一样下对比)内联式 > 嵌入式 > 外部式【注意】但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面二、选择器1、标签选择器标签选择器其实就是html代码中的标签。如<html>、<body>、<h1>、<p>、<img>。例如下面代码：p{font-size:12px;line-height:1.6em;}上面的css样式代码的作用：为p标签设置12px字号，行间距设置1.6em的样式。2、类选择器(.classname). 类选器名称{css样式代码;}如：<span class="stress">胆小如鼠</span>.stress{color:red;}3、ID选择器如：<span id="setGreen">公开课</span>#setGreen{ color:green; }【注意】在一个HTML中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。4、包含(后代)选择器如：.first  span{color:red;}          .first>span{color:red;}【总结】>作用于元素的第一代后代，空格作用于元素的所有后代。5、通用选择器通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素如：* {color:red;}6、伪类选择符为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：a:hover{color:red;}7、分组选择符当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，）如：h1,span{color:red;}三、CSS的继承、层叠和特殊性1、继承p{color:red;}<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>【注意】有一些css样式是不具有继承性的。如border:1px  solid  red;2、特殊性标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。继承也有权值但很低，有的文献提出它只有0.13、层叠当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。【总结】内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件）4、重要性(优先级最高)p{color:red!important;}四、CSS格式化排版1、字体body{font-family:"宋体";}2、字号、颜色body{font-size:12px;color:#666}3、粗体p span{font-weight:bold;}4、斜体p a{font-style:italic;}5、下划线p a{text-decoration:underline;}6、删除线.oldPrice{text-decoration:line-through;}7、缩进p{text-indent:2em;}8、行间距(行高)p{line-height:1.5em;}9、中文字间距、字母间距文字间隔或者字母间隔就可以使letter-spacing 来实现h1{letter-spacing:50px;}单词间距设置，可以使用 word-spacing 来实现h1{word-spacing:50px;}10、对齐——段落排版h1{text-align:center;}其他：值的含义1、  像素2、  em如果元素的 font-size 为 14px ，那么 1.5em = 21px；【注意】当给 font-size 设置单位为 em 时，此时计算的标准以父元素的 font-size 为基础。五、CSS盒模型(一)、CSS元素分类(在css中，html中的标签元素大体分为如下三种不同类型)一、块状元素<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>a{display:block;} 可将内联元素a转换为块状元素1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）2、元素的高度、宽度、行高以及顶和底边距都可设置。3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。二、内联元素（行内元素）（inline）元素<span>、<a>、<label>、 <strong> 和<em>1、和其他元素都在一行上；2、元素的高度、宽度及顶部和底部边距不可设置；3、元素的宽度就是它包含的文字或图片的宽度，不可改变。三、内联块状元素同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。inline-block 元素特点：1、和其他元素都在一行上；2、元素的高度、宽度、行高以及顶和底边距都可设置。a{display:inline-block;}(二)、CSS盒模型盒子模型包含三种：方向顺序都是上右下左(顺时针)，如pading-top/pading-right /pading-bottom/pading-right一、padding内边距盒子与内容（<p><a><img>……）的距离。分为：padding—left（左）；padding—right（右）；padding—top（上）；padding—bottom（下）；可以一同设置，全部在padding中。二、margin 外边距：盒子与盒子之间的填充，与上同。三、border：边框，一起写包含：border：1px  solide  #（颜色号）一般用实心边框，其他的边框需要考虑兼容性问题！1、border-style（边框样式）常见样式有：dashed（虚线）| dotted（点线）| solid（实线）。2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:border-color:#888;//前面的井号不要忘掉。3、border-width（边框宽度）中的宽度也可以设置为：thin | medium | thick（但不是很常用），最常还是用象素（px）。同样border也有四种方向：border-top/border-right/border-bottom/border-left【总结】上述盒模型代码缩写一、有距离有关的元素1、如果top、right、bottom、left的值相同margin:10px;2、如果top和bottom值相同、left和 right的值相同margin:10px 20px;3、如果仅是left和right的值相同margin:10px 20px 30px 20px;     可缩写为：margin:10px 20px 30px;二、颜色几种方式：英文：p{color:red;}   RGB ：p{color:rgb(133,45,200);}  十六进制：p{color:#00ffff;}p{color: #336699;}  可以缩写为： p{color: #369;}三、字体缩写body{    font-style:italic;    font-variant:small-caps;     font-weight:bold;     font-size:12px;     line-height:1.5em;     font-family:"宋体",sans-serif;}  可缩写如下：body{    font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;}六、CSS布局模型一、流动模型（Flow）Flow布局是默认的网页布局模式；默认状态下，块状元素的宽度都为100%；默认状态下，内联元素显示宽度是自身的宽度，内联元素都会在所处的包含元素内从左到右水平分布显示。二、浮动模型 (Float)float:left;三、层模型（Layer）1、绝对定位(position: absolute)最接近的一个具有定位属性的父包含块进行绝对定位使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位2、相对定位(position: relative)相对于以前的位置移动3、固定定位(position: fixed)相对于浏览器视图4、Relative与Absolute组合使用a、参照定位的元素必须是相对定位元素的前辈元素：b、参照定位(父)的元素必须加入position:relative;<div id="box3">    <img src="http://img.mukewang.com/541a7d8a00018cf102000200.jpg">    <div id="box4">当我还是三年级的学生时是一个害羞的小女生。</div></div>----------------------------------------------div{border:2px red solid;}#box3{    width:200px;    height:200px;    position:relative;    }#box4{    width:90%;    position:absolute;      bottom:0px;    }七、CSS样式设置小技巧一、水平居中设置-行内元素通过给父元素设置 text-align:center 来实现
来源: http://www.imooc.com/learn/9
0 0