CSS样式与布局详解-CSDN博客

本文链接：https://blog.csdn.net/ruanwenjun_csdn/article/details/78289829

CSS全称Cascading Style Sheets 层叠样式表,主要用于定义HTML内容在浏览器中的显示样式，如文字大小，颜色，字体加粗等。

<styletype="text/css">

Color:…; /*--------CSS的注释写法-----------*/

}

</style>

CSS可以分为内联式，嵌入式，和外部式三种。优先级为内联式>嵌入式>外部式，总得来说就是离被设置元素越近优先级越高

CSS中HTML元素被分为块状元素、内联元素、和内联块状元素

常见的内联块状元素：input,img //可以设置长宽高以及居中，但是元素在一行显示

常见的块状元素：<div>,<p>,<h1-h6>,<ol>,<ul>,<dl>,<table>,<address>,<blockquote>,<form>

常见的内联元素：<a>,<span>,<br>,<i>,<em>,<strong>,<lable>,<q>,<var>,<cite>,<code> //元素在一行显示，不能设置长宽高

块级元素：每个块级元素都从新的一行开始，并且其后的元素也另起一行，元素的高度宽带以及顶和底边距都可设置

display:block; //将a变成块级元素 display:inline; //将a变成内联元素

display:inline-block; //将a变成内联块状元素

}

内联式：指直接把CSS代码写在HTML开始标签中，并且写在style=" ; ; " 引号中。

嵌入式：把CSS代码写在<styletype="text/css"> /*-------------每一个样式的最后要写一个；---------------------------------*/

p{ //选择器 ,修改<p></p>之间的内容

color: ; //颜色

font-size: 20px ; //字号

font-family: ; //字体

font-weight:bold; //粗体

Font-style:italic; //斜体

text-decoration:underline; //下划线

text-decoraction:line-through; //删除线

text-indent:2em; //段前空两格

text-height:2em; //行间距

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

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

text-align:left/center/right; //设置文字或图片等块状元素居左/中/右

}

.stress{ //类选择器，修改<… class="stress">…<>之间的内容，及在标签中指定class=""，在一个HTML文件中类选择器可以使用多次

; //可以用类选择器为一个元素标签指定多个样式即 class="stress stress1"可以同时指定stress和stress1的样式，ID选择器不可以

}

#stress{ //ID选择器,在标签中指定id="",在一个HTML文件中ID选择器只能使用一次，即只能为一个ID指定样式

;

}

.food>li{ //子选择器，会让class=food下的li子标签指定样式，只作用于第一代后代

;

}

.food li{ //包选择器，作用于class=food下的所有li子标签

;

}

*{ //通用选择器，让HTML的所有标签元素都改变样式

；

}

</style>

a：hover{ //伪类选择符，给鼠标划过的时候添加样式（目前最多的是<a>标签这个组合）

;

}

span,p { //分组选择符,在标签中使用，可以为多个标签元素设置样式，可以与前面的选择器组合使用

;

}

外部式：将CSS代码单独写在一个文件里，以.css为文件扩展名，在<head>内导入

<head>

</head>

某些样式具有继承性，某些样式不具有继承性，即某些样式为一个标签例如p设置，那么该P包含的里面所有的元素都会设置，但是某些样式则不具有这种继承的特性。

权值：标签的权值为1，类选择器的权值为10，ID选择器的权值为100，另外权值是可以相加的,继承的权值为0.1，在样式中分号前面加!important使其具有最高权值

层叠：当权值相等时，离元素越进则被使用，即越后面越被使用

盒子模型:

边框: border-width(边框宽度) border-style border-color

div{ 2px dashed(虚线)/dotted(点线)/solid（实线） red;}

div{

border-top: //分别为上下左右边框分别设置样式

border-bottom:

border-left:

border-right：

}

div{

width: //内容宽度

padding-left…: //填充（可以设置上下左右的，下面两个也如此）

border-left…: //边框

margin-left…: //外边界

布局模型：流动模型（Flow），浮动模型（Float），层模型（Layer）

流动模型（Flow）:是默认的网页布局模式，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，内联元素从左到右水平分布

浮动模型（Float）:可以让块状元素在同一行显示

div{

float:left/right; //设置元素左浮动/右浮动

}

层模型（Layer）：

绝对定位position:absolute //使元素相对于其最接近的一个具有定位属性的父包含块进行绝对定位，如果不存在这样的父包含块，则相对于浏览器

div{

position:absolute;

left:100px; //左移100像素（距离左边+20）

top:50px; //上移50像素（距离上面+50）

}

相对定位position:relative

div{

position:relative;

left/right/top/bottom: //先按float方式产生一个元素，然后相对之前的位置移动，但是之前的位置保持不变，即后面的元素的位置参照还是按该元素之前的位置

}

参照元素进行定位：

#div1{

position:relative;

}

#div2{

position:absolute;

left/…;

} //此时ID=div2的元素移动就是参照ID=div1的元素，但是ID=div1的元素必须是ID= div2的元素的前辈，并且ID=div1的元素必须position:relative；

固定定位position:fixed 他的相对移动是参照浏览器的窗口，并且它不会随着浏览器窗口的滚动而滚动，即始终出现在浏览器窗口的某个位置中即使鼠标向下滚动它也依然存在

水平居中：

行内元素水平居中-----------------------------text-align:center; //当设置文本或图片时，通常是通过给父元素设置。

块状元素：

定宽块状（宽度为定值）： margin: auto; //即把margin-left和margin-right设置为auto，宽度width一定要是定值

不定宽块状（宽度不是一个定值）： 1.加入Table标签

将元素放入Table标签中

div{

margin:0 auto;

}

<table>

<tbody>

</td></tr>

</tbody>

</table>

2.设置display:inline

将元素设置为行内元素，然后使用text-align:center;

3.设置position:relative和left:50%；

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

height=100px;

line-height=100px; //即通过设置height(元素高度)=line-height来使文本垂直居中

父元素高度确定的多行文本垂直居中：

1.使用table，包括tbody,tr,td,设置vertical-align:middle; //td默认就使用了vertical-align:middle;

<table>

<div>

…

</div>

</td></tr></tbody>

</table>

CSS学习

CSS全称Cascading Style Sheets 层叠样式表,主要用于定义HTML内容在浏览器中的显示样式，如文字大小，颜色，字体加粗等。

CSS可以分为内联式，嵌入式，和外部式三种。 优先级为内联式>嵌入式>外部式，总得来说就是离被设置元素越近优先级越高

CSS中HTML元素被分为块状元素、内联元素、和内联块状元素

CSS可以分为内联式，嵌入式，和外部式三种。优先级为内联式>嵌入式>外部式，总得来说就是离被设置元素越近优先级越高