CSS1

最新推荐文章于 2024-10-19 21:23:35 发布

Klaine_MAO

最新推荐文章于 2024-10-19 21:23:35 发布

阅读量186

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/Klaine_MAO/article/details/115765277

版权

CSS（cascading style sheet)层叠样式表

一个参考手册：css.doyoe.com
w3school

浏览器组成

shell(外壳）
内核（渲染引擎/JS引擎）

外壳	内核
Google Chrome	webkit/blink
Firebox	gecko
IE	trident
safari	webkit
opera	presto

（opera属于360和昆仑万维）

CSS

选择器 {
属性名： 属性值；
}

外部样式表

例： index.css 表明是css文件
引入html：

<link rel="stylesheet" type="text/css" href="...."/>

引用链接----href
引用资源----src

Html内联（行内/行间）样式表

<div style="width: 100px; height:100px;"></div>

Html内部样式表

<style>
div{
width:100px;
height:100px;
background-color:#000;
}
</style>

权重（优先级）

内联>内部样式表>外部样式表

id选择器

（一个元素只能使用一个id）

<div id="box"></div>

<style type="text/css">
#box{
	width:100px;
	height:100px;
	}
	
<style type="text/css">
[id="box"]{
	width:100px;
	height:100px;
	}

类 class(在一个界面可出现多次）

与id类似但是使用 .box

标签选择器

<div></div>

<a href="..."></a>

(a后加href)
在CSS中

[href]{
    text-decoration: none;/*去下划线*/
    }

制作表单

<input type="text"/>

[type="text"]{/*改变裱框宽度*/
	width:200px;
	}

改变权重

外联

div{
background-color: green !important;
}

但慎用。
优先级
！important>id>class=属性选择器>标签>*(通配符)

以下格式不存在

#content#text{

}

派生选择器（父子选择器）

例如

div p{

{
strong em{

}

CSS权重


*	0
标签/伪元素	1
class/属性/伪类	10
id	100
内联样式	1000
！important	正无穷

宽高设计属性

width height min-width min-height max-height max-width
(前三个用的比较多）
width可以用百分值 px em来定义
当把整个网页缩小可能有换行的现象
此时用min-width:一个数值px；（用的多）
此时可以出来一个滚动条，防止它换行。
那么max-width：一个数值px；（比较少用）
当扩大网页，不再继续延长，不会继续往后延伸。
min-height，当所需高度大于这个最小的会被撑开，同时定义一个最大高度时，不继续扩大高度，但是字体会溢出。

若想溢出的被隐藏，则使用overflow属性名。

想要隐藏，则使用overflow: hidden;

同时也可以有滚动条
此时需要使用
overflow: scroll;

需要满足需求，字数不够，不显示滚动条，溢出显示
则使用overflow: auto;

浏览器默认字体大小16px（像素）

font-size 设置字体大小以高度为基准设置字体大小。
宽度是自动缩放的。
（常用字号 14 16 12 18px）

font-weight：字体粗细

属性值：lighter normal bold bolder (100-900)
但不是每种字体都可以用上述英文字母的四种，数字同理
想改变strong标签内字体大小回到正常可以在CSS用这个改
font-weight: normal;
浏览器默认给有默认样式的赋比方标签p h1之类的，本身就是加粗字体，故可用这个来改字体粗度。

字体风格样式 font-style

italic（斜体）/oblique(倾斜）

有些字体有斜体样式，有些无，此时若想让它倾斜，用oblique，强制文字倾斜。
标签em也可以使字体倾斜，若想让他不倾斜。则font-style: normal;

字体样式设置 font-family

通用字体： arial
font-family是可以用复合值的（可以写多个）
例如
font-family: “Times New Roman”,Georgia,serif;
这样写的好处：当第一个字体不被浏览器兼容，浏览器就去选择第二个，以此类推，回退。
字体有无引号（双引号）的：中文必加引号，有空格的字体加引号，其余可以不加。

比较全的字体/兼容性最好的：

font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

字体族大体上分为两类：sans-serif（无衬线体）和serif（衬线体），当所有的字体都找不到时，我们可以使用字体族名称作为操作系统最后选择字体的方向。一般非衬线字体在显示器中的显示效果会比较好，因此我们需要在最后添加 sans-serif.

字的颜色 color

可以用英文单词，也可以用十六进制#****，rgb；
每一个都是0-255，原理是三原色（红绿蓝）
写法：color: rgb(255,0,0); /这个是红色/
或者三个里面都是百分比写法
rgb(100%,0%,0%)这个也是红色
如果数值超过255，自动调到255.

边框border

属性值是复合值
例如
border： 1px solid（实线框） #000；（宽度，样式，颜色）
边框的宽度是在盒子容器设置的宽高之外的，可视区域是盒子本身宽高加上边框的宽*2
border-width：
一个值：表示上下左右都是这个宽度
两个值：第一个值是上下，第二个值是左右。
三个值：第一个是上，第二个是左右，第三个是下
四个值：按顺序为上右下左。
样式
dotted dashed solid double groove ridge inset outset
border-color: transparent透明的边框