css

6.1css（层叠样式表）

主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

例如：为段落<p>（选择器）设置字体样式写成。

标签选择器还有{<html>、<body>、<h1>、<p>、<img>}

P为选择符 { color（属性）: red（值）;}为声明 (属性和值之间用英文冒号)声明之后要加;

font-size:20px;/*设置文字字号*/

color:red;/*设置文字颜色*/

font-weight:bold;/*设置字体加粗*/

}

</style>（嵌入式css）

三个短语的文本颜色设置为红色，这时就可以通过设置样式来设置，而且只需要编写一条css样式语句。

第一步：把这三个短语用<span></span>括起来。（见右边代码编辑器13行）

第二步：写入下列代码：（见右边代码编辑器7-8行）

span{

color:red;

}(嵌入式css)

/**/css用来注释文字

!-- --html用来注释

7.1内联式css样式，直接写在现有的HTML标签中

例如 <p style="color:red;font-size:12px">这里文字是红色。</p>

css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。

7.2外部式css样式，写在单独的一个文件中

把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内

<head>

<title>嵌入式css样式</title>

</head>

注意：

1、css样式文件名称以有意义的英文字母命名，如 main.css。

2、rel="stylesheet" type="text/css" 是固定写法不可修改。

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

小结：三种方式优先级（在的相同权值的情况）：内联式>嵌入式>外联式

（嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面）

8.1类选择器 ID选择器

1、英文圆点开头

2、其中类选器名称可以任意起名（但不要起中文噢）

使用方法：

第一步：使用合适的标签把要修饰的内容标记起来，如下：

第二步：使用class="类选择器名称"为标签设置一个类，如下：

第三步：设置类选器css样式，如下：

.stress{color:red;}/*类前面要加入一个英文圆点*/

ID选择器

1、为标签设置id="ID名称"，而不是class="类名称"。

2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。

类选择器与ID选择器的区别：

ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的

8.2子选择器包含选择器

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

Border属性：上右下左（逆时针方向）

包含选择器：加入空格,用于选择指定标签元素下的后辈元素

区别：子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。包含选择器作用于所有后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

8.3通用选择器伪类选择符分组选择符

通用选择符：* {}

伪类选择符：允许给html不存在的标签（标签的某种状态）设置样式

a:hover{color:red;

font-size:20px;}

分组选择符：分组选择符（，）

h1,span{color:red;}

相当于h1{color:red;} span{color:red;}

9.1继承

CSS的某些样式是具有继承性的。它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。

1.特殊性：

浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式

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

当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。（层叠）

2.重要性：

用!important来设置最高权重。!important要写在分号的前面

例如：p{color:red!important;}

10.1文字排版

css样式为网页中的文字设置字体、字号、颜色、粗体、斜体、下划线/删除线等样式属性。

body{

font-family:”Microsoft Yahei”;字体

font-size:22px;字的大小

color:red;字的颜色

font-weight:bold;//粗体

font-style:italic;//斜体

text-decoration:underline/line-through;//下划线

}

10.2段落排版

缩进、行间距、中文字间距（字母间距）、单词间距、排版对齐

text-indent:2em;//缩进2个字符

line-height:1.5em;//行间距1.5倍字符

letter-spacing:50px;// 中文字间距（字母间距）

word-spacing:20px;//单词间距

text-align:center/left/right;//居中

}

11.1元素分类

CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

常用的块状元素有：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

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

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

常用的内联元素有：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

1、和其他元素都在一行上；

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

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

3.常用的内联块状元素有：<img>、<input>

display:inline-block就是将元素设置为内联块状元素

1、和其他元素都在一行上；

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

11.2块级标签（盒子模型）

Margin border padding

div{ border:2px solid red;}

div{

border-width:2px;

border-style:solid;

border-color:red;

}

1、border-style（边框样式）常见样式有：

dashed（虚线）| dotted（点线）| solid（实线）。

2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:border-color:#888;

3、border-width（边框宽度）中的宽度也可以设置为：

thin | medium | thick（但不是很常用），最常还是用象素（px）。

div{border-bottom:1px solid red;}边框的上右下左

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

div{

width:200px;//内容宽度

padding:20px;//填充宽度

border:1px solid red;//边框

margin:10px; 边界

}

盒子模型代码简写

margin:10px 10px 10px 10px; 可缩写为：margin:10px;

margin:10px 20px 10px 20px; 可缩写为：margin:10px 20px;

margin:10px 20px 30px 20px; 可缩写为：margin:10px 20px 30px;

颜色代码简写

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;

}

至少要指定 font-size 和 font-family 属性

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

12.1布局模型：

1、流动模型（Flow）

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

（2）内联元素都会在所处的包含元素内从左到右水平分布显示。

2、浮动模型 (Float)

块状元素并排（靠左/靠右/一左一右显示）

Float:left/right;

3、层模型（Layer）（图层编辑功能）

三种形式：

1、绝对定位(position: absolute)

设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

2、相对定位(position: relative)

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

3、固定定位(position: fixed)

与absolute类似。它的相对移动的坐标是视图（屏幕内的网页窗口）本身。固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响

绝对位置和相对位置的组合使用

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

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

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

#box1{

width:200px;

height:200px;

position:relative;

}

#box2{

position:absolute;

top:20px;

left:30px;

}

box2就可以相对于父元素box1定位了

13.1

颜色值

英文颜色：red green blue

RGB颜色：与 photoshop 中的 RGB 颜色是一致的，按比例调色

十六进制颜色：#0000ff

长度值

像素（相对值）：px

em:1em=font-size: n px

百分比：如：130%font-size

14.1

1.水平居中设置行内元素

两种情况：行内元素还是块状元素，块状元素里面又分为定宽块状元素，以及不定宽块状元素。文本、图片等行内元素时，水平居中是通过给父元素设置来实现。

.class{text-align:center}

2.水平居中设置-定宽块状元素

定宽块状元素：块状元素的宽度width为固定值。左右margin”值为“auto”来实现居中的

3.水平居中总结-不定宽块状元素方法

不定宽度的块状元素设置居中，比如网页上的分页导航，因为分页的数量是不确定的

不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：

加入 table 标签

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

第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。

设置 display: inline 方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置

<style>

.container{

text-align:center;

}

/* margin:0;padding:0（消除文本与div边框之间的间隙）*/

.container ul{

list-style:none;

margin:0;

padding:0;

display:inline;

}

/* margin-right:8px（设置li文本之间的间隔）*/

.container li{

margin-right:8px;

display:inline;

}

</style>

3.设置 position:relative 和 left:50%：利用相对定位的方式，将元素向左偏移 50% ，即达到居中的目的，所以我们不能通过设置宽度来限制它的弹性。

给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

.container{

float:left;

position:relative;

left:50%

}

.container ul{

list-style:none;

margin:0;

padding:0;

position:relative;

left:-50%;

}

.container li{float:left;display:inline;margin-right:8px;}

</style>

14.2垂直居中-父元素高度确定的单行文本

两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本

单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。

方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。

14.3隐式display

1. position : absolute

2. float : left 或 float:right

简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。

posted on 2018-08-13 17:20 vvzw 阅读(101) 评论(0) 收藏举报

刷新页面返回顶部

vvzw

css

导航

公告