CSS的基础知识

8-07 192 views

CSS样式

  • CSS全称为“层叠样式表 (Cascading Style Sheets)”
  • 主要用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、 字体加粗等。
  • 由 选择符 和 声明 组成,而 声明 又由 属性 和 值 组成.

选择符

  • 又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元 素(如ol)不会受到影响。

声明

  • 在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔。
  • 当有多条声明时,中间可以英文分号 “;”分隔
  • 最后一条声明可以没有分号,但是为了以后修改方便,一般也加上分号。

为了使用样式更加容易阅读,可以将每条代码写在一个新行内

注释语句格式:/*注释语句*/

从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式、嵌入式和外部式三种

  1. 内联式css样式表就是把css代码直接写在现有的HTML标签中,要写在元素的开始标签里,css样式代码要写在style=""双引号中,如果有多条css样式代码设置可以写在一起,中间用分号隔开。<p style="color:red;font-size:12px">这里文字是红色。</p>
  2. 嵌入式css样式:就是可以把css样式代码写在<style type="text/css"></style>标签之间,嵌入式css样式必须写在<style></style>之间,并且一般情况下嵌入式css样式写在<head></head>之间。<style type="text/css">
    span{
    color:red;
    }
    </style>
  3. 外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内。<link href="base.css" rel="stylesheet" type="text/css" />,css样式文件名称以有意义的英文字母命名,如 main.css。rel="stylesheet" type="text/css" 是固定写法不可修改。

<link>标签位置一般写在<head>标签之内。

优先级:相同权值的情况→内联式 > 嵌入式 > 外部式
(嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。就近原则(离被设置元素越近优先级别越高)。

选择器:

1、标签选择器:标签选择器其实就是html代码中的标签。 p{font-size:12px;line-height:1.6em;}

2、类选择器:最常用的; .类选器名称{css样式代码;}
1、英文圆点开头
2、其中类选器名称可以任意起名(但不要起中文噢)
用法:标记→设类→类选器样式

3、ID选择器:类似于类选择符。

用法:1、为标签设置id="ID名称"

2、ID选择符的前面是井号(#)号

类和ID选择器的区别

相同:可以应用于任何元素

不同:1、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择
器可以使用多次。

2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的
方法实现,ID选择器是不可以的(不能使用 ID 词列表)。

 

子选择器:即大于符号(>),用于选择指定标签元素的第一代子元素。

.food>li{border:1px solid red;}

 

包含(后代)选择器:即加入空格,用于选择指定标签元素下的后辈元素。

.first span{color:red;}

 

>(子选择器)作用于元素的第一代后代,空格(后代选择器)作用于元素的所有后代。

 

通用选择器:使用一个(*)号指定,作用是匹配html中所有标签元素。

* {color:red;}

 

伪类选择符:因为允许给html中不存在的标签(标签的某种状态)设置样式,所以叫做伪类选择符;

 

到目前为止,兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 例: a:hover{color:red;}

:hover 可放在任意的标签上,比如说 p:hover,但兼容性不好

 

分组选择符:(,) 可为html中多个标签元素设置同一个样式 例:h1,span{color:red;}

 

样式继承:允许样式不仅应用于某个特定html标签元素,而且应用于其后代。

不具有继承性的属性:如border:1px solid red;

 

权值:标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。

特殊:继承的权值最低

 

层叠:在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最
后面的css样式会被应用。

解释了优先级:内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。

 

重要性:设置最高权重 !important(要写在分号的前面) 例如:p{color:red!important;}

样式优先级:!important>用户设置>网页制作者>浏览器默认

 

文字排版:1)字体:font-family: 一般网页常设置“微软雅黑” 如:body{font-family:"Microsoft Yahei";}

2) 字号、颜色:font-size: color: 例如:body{font-size:12px;color:#666}

3)粗体:font-weight:bold 例如:p span{font-weight:bold;}

4) 斜体:font-style:italic 例如:p a{font-style:italic;}

5)下划线:text-decoration:underline 例如:p a{text-decoration:underline;}

6)删除线:text-decoration:line-through 例如:.oldPrice{text-decoration:line-through;}

段落排版:1)缩进:text-indent: 例如:p{text-indent:2em;} 注意:2em的意思就是文字的2倍大小。

2)行间距(行高):line-height: 例如:p{line-height:1.5em;} 实现设置段落行间距为1.5倍

3)间距:①文字间距: letter-spacing: 例如:p{letter-spacing:20px;}

注意:用在英文单词时,是设置字母与字母之间的间距。

②单词间距:word-spacing: 例如:p{word-spacing:20px;}

4)对齐:text-align:left/center/right (分别为左、居中、右对齐)

标签元素:1、块状元素:display:block 将元素显示为块级元素

1)常用:<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

2)特点:①每个块级元素都从新的一行开始,并且其后的元素也另起一行。

②元素的高度、宽度、行高以及顶和底边距都可设置。

③元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

2、内联元素:display:inline 将元素设置为内联元素

1)常用:<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

2)特点:①和其他元素都在一行上;

②元素的高度、宽度及顶部和底部边距不可设置;

③元素的宽度就是它包含的文字或图片的宽度,不可改变。

 

3、内联块状元素:display:inline-block 将元素设置为内联块状元素

1)常用:<img>、<input>

2)特点:①和其他元素都在一行上;

②元素的高度、宽度、行高以及顶和底边距都可设置。

 

盒子模型:1、页面元素(包含):1)内容:文字、图片、视频等等; 实际高宽=内填充+边框+内容的高宽

2)内填充:padding 外边距:margin 边框:border 注意:都有四个方向。

2、边框:border 围绕着内容及补白的线,设置它的粗细、样式和颜色(边框三个属性)。

1)border-width(边框宽度)中的宽度也可以设置为:thin | medium | thick(但不是很常用),最常还是用象素(px)

2)border-style(边框样式)常见样式有:dashed(虚线)| dotted(点线)| solid(实线)。

3)border-color(边框颜色)中的颜色可设置为十六进制颜色,

注意:border-color:#888;//前面的井号不要忘掉。

4)可缩写:例:a{border-bottom:1px solid red;}

5)单独设置边框:(上)border-top: (下)border-bottom: (左)border-left: (右)border-right:

例如:div{border-bottom:1px solid red;}

3、宽度和高度:width、height

1)css内定义的宽(width)和高(height),指的是填充以里的内容范围。

2)一个元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

4、填充:padding div{padding:20px 10px 15px 30px;} 缩写顺序:从上开始,顺时针旋转。(上右下左)

5、边界:margin div{margin:20px 10px 15px 30px;} 缩写顺序:从上开始,顺时针旋转。(上右下左)

6、padding和margin的区别:padding在边框里,margin在边框外。

布局模型:

1、流动模型:flow 默认的网页布局模式

特征:1)块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实
际上,块状元素都会以行的形式占据位置。

2)内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)。

2、浮动模型:float 任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动。

 

3、层模型:layer 在网页设计领域,由于网页大小的活动性,层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。

定位属性:position: 让html元素在网页中精确定位

1)绝对定位:position:absolute

作用:将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定

位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。

例如:div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}

2)相对定位:position:relative

作用:完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于
以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定。 注意:偏移前的位置保留不动。

例如:div{
width:100px;
height:50px;
border:3px red solid;
position:relative;
right:100px;
bottom:50px;
}

3)固定定位:position:fixd

 

作用:相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的
滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗
口内视图的某个位置,不会受文档流动影响。

 

relative与absolute组合使用规则:

1、参照定位的元素必须是相对定位元素的前辈元素;

2、参照定位的元素必须加入position:relative;

3、定位元素加入position:absolute,便可以进行偏移定位了。

盒模型代码简写:外边距(margin)、内边距(padding)、边框(border),设置上下左右四个方向的边距是按照顺时针方向设置的:上
右下左。

通用方法:1、top、right、bottom、left相同,可只写一个值。

例如:margin:10px 10px 10px 10px 可缩写为:margin:10px

2、top、bottom相同,right、left相同,可分别写一个值。

例如:margin:10px 20px 10px 20px 可缩写为:margin:10px 20px

3、right、left相同,可把2、4缩写为2。

例如:margin:10px 20px 30px 20px 可缩写为:margin:10px 20px 30px

 

颜色值缩写:设置的颜色是16进制的色彩值时,如果每两位的值相同,可以缩写一半。

例如:p{color:#336699;} 可缩写为p{color:#369}

 

字体缩写:注意:1、使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性(如 font-weight、font-style、
font-varient、line-height)如未指定将自动使用默认值。

2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

常用格式:(中文网站)font:12px/1.5em "宋体",sans-serif;

 

颜色值:有字体颜色(color)、背景颜色(background-color)、边框颜色(border)等

设置方法:1、英文命令颜色 例如:p{color:red;}

2、RGB颜色:由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。

注意:每一项的值可以是 0~255 之间的整数,也可以是 0%~100% 的百分数。

例如:p{color:rgb(133,45,200);} p{color:rgb(20%,33%,25%);}

3、十六进制颜色:现在比较普遍使用的方法,原理其实也是 RGB 设置,但是其每一项的值由 0-255 变成了十六进制
00-ff。 例如:p{color:#00ffff;}

 

长度值:line-height: 目前比较常用的长度单位:px(像素)、em(倍数)、%百分比。 注意:都是相对单位。

1、像素:指的是显示器上的小点(css规范中假设“90像素=1英寸”)。实际情况是浏览器会使用显示器的实际像素值,在目前大
多数的设计者都倾向于使用像素(px)作为单位。

2、em:如果元素的font-size为14px,那么1em=14px;

注意:当给font-size设置单位为em时,此时计算的标准以p的父元素的font-size为基础。

3、百分比:例如:p{font-size:12px;line-height:120%;}

 

设置小技巧:1、水平居中设置

1)行内元素:通过给父元素设置 text-align:center 来实现。

2)块状元素:设置元素为块状元素时用 text-align:center 就不起作用了

①定宽块状元素:通过设置“左右margin”值为“auto”来实现居中。

②不定宽块状元素:三种方法。

1、加入table标签

1)为需要设置居中元素的外面加入一个table标签(包括<tbody>、<tr>、<td>)

2)为这个table设置“左右margin居中”(和定宽块状元素的方法一样)

2、设置 display;inline 方法

1)改变块级元素的 display 为 inline 类型

2)然后使用 text-align:center 来实现居中效果。

注意:方法相比第一种方法的优势是不用增加无语义标签,简化了标签的嵌套深度,但也存在着一些

问题:它将块状元素的 display 类型改为 inline,变成了行内元素,所以少了一些功能,比如设定长度值。

3、设置 position:relative 和 left:50%;

1)给父元素设置 float;

2)给父元素设置 position:relative 和 left:50%;
来实现水平居中。

3)子元素设置 position:relative 和 left:-50%。

注意:这种方法可以保留块状元素仍以 display:block 的形式显示,优点不添加无语议表标签,不增

加嵌套深度,但它的缺点是设置了 position:relative,带来了一定的副作用。

 

2、垂直居中

1)父元素高度确定的单行文本

通过设置父元素的height和line-height高度一致来实现的

2)父元素确定的多行文本

①使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle。

注意:td 标签默认情况下就默认设置了 vertical-align 为 middle

②在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell,激活 vertical-
align 属性,IE6、7 并不支持这个样式。

优缺点:这种方法的好处是不用添加多余的无意义的标签,但缺点也很明显,它的兼容性不是很好,不兼容
IE6、7。

隐形改变display类型:当为元素(不论之前是什么类型元素,display:none 除外)设置以下 2 个句之一:

1、position : absolute

2、float : left 或 float:right

元素会自动变为以 display:inline-block 的方式显示,当然就可以设置元素的 width 和 height 了且默认宽度不
占满父元素。

欢迎留言