CSS基本样式和模型

来源：互联网发布：淘宝双11打折编辑：程序博客网时间：2024/05/19 13:58

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

css样式由选择符和声明组成，而声明又由属性和值组成

选择符：指网页中要应用的样式规则元素，如网页中的p标签内的文字会引用上面的样式改变字体颜色。

声明：在{ }中的就是声明，属性和值是在英文冒号分隔，有多条声明中间可以用英文分号分隔。

css样式可以在html标签中写：<p style="color:red">css样式</p>。也可以引用<style></style>样式。

也可以单独写一个外部文件，以.css为扩展名，在head内（不是style内）使用<link>标签引入。

例如：<head><link href="base.css" rel="stylesheet" type="text/css" /></head>

注：1.css样式文件名称以有意义的英文字母命名。

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

3.<link>标签位子一般写在<head>标签内。

类选择器：语法：.类选器名称{css样式代码}

注：1.英文圆点开头。

2.类选择器名称可以任意起名（最好不雅欧勇中文）

ID选择器：1.为标签设置id="ID名称"，而不是class="类名称"。 

2.ID选择符前面是#号不是英文圆点

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

相同点：可以应用于任何元素

不同点：1.ID选择器只能在文档中使用一次，而类选择器可以多次使用

2.可以使用类选择器词列表方法为一个元素同时设置多个样式，ID选择器不可以。

子选择器 ：大于符号，用于选择指定标签元素的第一代子元素。 （.food>li {border：1px soild red； } 表示class名为food下的子元素 li 标签样式）

包含（后代）选择器：即加入空格，用于选择指定标签下的后辈元素。（.first span{color:red;}）

总结：>作用于元素的第一后代，空格作用于元素的所有后代。

通用选择器：（*{color：red；}）匹配html中所有标签元素字体变成红色。

伪类选择符：给html不存在的标签设置样式。（a:hover{color：red}）给鼠标划过的状态设置字体颜色。

分组选择符：（，）为多个html标签设置同一样式。h1，span{color：red；}

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

特殊性：为同一元素设置不同的css样式，元素通过权值高低来判断启用哪一个css样式。权值高的会被应用

（标签权值为1，类选择的权值为10，ID选择符的权值为10，继承也有权值但是基本是非常低的）

层叠：表示在HTML中对于同一个元素可以有多个css样式存在，当有相同权重存在会根据css样式前后顺序来决定，处于后面的css样式会被应用。

重要性：有些特殊情况需要为某些样式设置具有最高权值，使用important（p{color：red ！important；}）

文字排版：

字体 ：body{font-family："Microsoft Yahei"；}

字体，颜色：body{font-size：20px;color："#666";}

粗体：p span{font-weight:bold;}

斜体：p a{font-style:italic;}

下划线：p a{text-decoration：underline；}

删除线：.oldPrice{text-decoration:line-through;}

缩进：p{text-indent：2em；}

行间距，行高：p{line-height：2em；}

中文字间距，字母间距：h1{letter-spacing：50px；}

对齐：h1{text-align：center（left，right，top，bottom）；}

元素分类：

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

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

常用的内联块状元素：<img>,<input>

块级元素：在html中<div>,<p>,<h1>,<form>,<ul>,<li>就是块级元素，设置display：block就是将元素显示为块级元素。a{diaplay:block;}

特点：1.每一个块级元素都从新的一行开始，并且其后的元素也另起一行。

2.元素宽度在不设置的情况下和父容器宽度一致，除非设定一个宽度。

3.元素的高度，宽度，行高以及顶和底边距都可设置。

内联元素：在html中<a>,<span>,<label>,<strong>,<em>就是内联元素，设置display：inline将元素设置为内联元素。div{diaplay:inline;}

特点：1.和其他元素都在一行上面。

2.元素的宽高及顶部和底部边距不可设置。

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

内联块状元素：在html中<img>,<input>就是内联块状。同时具备内联元素，块状元素的特点。设置diaplay：inline-block将元素设置为内联块状元素。

特点：1.和其他元素都在一行上。

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

盒模型：

边框：盒子模型的边框就是围绕内容及补白的线，这条线你可以设置它的粗细，样式，颜色。

注：1.border-style（边框样式）常见样式：dashed（虚线）|dotted（点线）|solid（实线）。

2.border-color（边框颜色）中的颜色可以设置十六进制颜色。

3.border-width（边框宽度）中的宽度也可以设置为：thin|medium|thick（不是很常用），最常用的是像素。

css布局模型：

布局模型是建立在盒模型基础上有三种布局模型：

1.流动模型。（Flow）

2.浮动模型。（Float）

3.层模型。（Layer）

流动模型：默认的网页布局模式。

特点：1.块内元素都会在所处包含元素内自上而下顺序垂直延伸分布,默认状态下，块元素宽度都为100%。

2.在流动模型下，内联元素都会在所处的包含元素内从左到由水平分布显示。

浮动模型：任何元素在默认情况下是不能浮动的，但可以用css定义为浮动，如div{float：left}。

层模型：层布局模型像图像软件PhotoShop中图层编辑一样，每个图层能精准定位操作。层模型有三种形式。

1.绝对定位：通过设置position：absolute 。 div{position：absolute；left：30px；top：50px；}

2.相对定位：通过设置position：relative。div{position：relative；left：100px；top：50px ；}

3.固定定位。通过设置position：fixed。div{position：fixed ；left：100px；top：50px；}

Relative和Absolute组合使用：

1.参照定位元素必须是相对定位元素的前辈元素。

2.参照定位的元素必须加入position：relative；

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

颜色值：

1.英文命令颜色 ：p{color：red；}

2.RGB颜色：p{color：rgb（133,45,200）；}或者p{color：rgb（20%，30%，40%）；}

3.十六进制颜色：p{color：#00ff00；}

长度值：

1.像素：像素指的是显示器上的小点

2.em：就是元素给定的字体font-size值，如果元素font-size为14px，那么1em=14px。

阅读全文

0 0