WEB技术之CSS

CSS是指层叠样式表(Cascading style sheets),样式定义如何显示html元素,样式通常存储在样式表中,把样式添加到CSS文件中,是为了解决内容与表现分离的问题,外部样式表可以极大提高工作效率,多个样式定义可层叠为一个.

两个常用容器

div

diversion就是划分,主要用来CSS布局用,包裹其他html元素,是常用的块级布局标签
span

主要用来包裹文字,给文字添加样式style="......",也叫行内元素/行内标签

css三种引入方式

行间引入

标签内有一个style属性,这个style属性就是为标签设置样式的style="属性:值; 属性:值;......;"

内部引入

在head内写style,style内写css样式

选择器{

属性:值;

}

[图片上传失败...(image-6bfb98-1594860675926)]

外部的CSS

将外部的css文件通过link链接进来

CSS选择器

标签选择器

操作的是所有的选中标签
==id==选择器

作为标签==唯一==的标识

标签中定义id="00001"

在style中 #00001{

属性:值;

}
class类选择器

要求标签有一个class属性

使用方式:在标签元素中class="c0001"

在style中.c0001{

属性:值;

}

所有的class相同的标签都会被选中

子代选择器

使用>表示子代,只选择儿子级别的标签,如div>p,表示选择的是div中儿子级别的p标签

后代选择器

使用空格表示后代如div p,表示div中所有的p标签

相邻选择器

使用+表示相邻,如div+p表示div直接后继的元素标签,下面紧挨的元素

兄弟选择器

使用~表示

属性选择器

选择出带有某种指定属性的标签

[属性="属性值(可不写)"]{

属性:值;

}

通配符选择器

星号*{

声明

}

对所有的内容进行声明(优先级低),主要用来清除默认样式bb
优先级

*<标签[元素]选择器<class<id<行内引入[内联式]<!important(最重要,权限无限大)

相同类型的选择器,在样式表中越靠后优先级越高 ,后面会覆盖前面的内容

若想让某有个样式的优先级变高,使用important修饰.

属性大全

direction:rtl;(配合Unicode -bidi:bidi-override使用) 字体方向从right到left

line-height:4px;行高

text-decoration:underline:下划线

font-style:italic;字体倾斜样式

font简写:style样式 weight粗细 size大小 family种类;

a:link 伪类,未被访问过得链接

a:visited 用户已经访问过的链接

a:active 链接被点击点击那一刻

a:hover 鼠标放上链接时

text-decoration 文本装饰

边框样式:

dashed虚线
double双线
dotted点线

浮动

float:right/left;

空内容会直接遮挡,非空不会遮挡

定位

position:位置;规定位置

static静态定位

relative相对于父级元素定位

fixed固定定位,把元素固定在显示器的某个位置

absolute绝对定位相对于整个浏览器,坐标从(0,0)开始算

行内元素与块级元素

块级标签block:独占一行p div h1-h6 ul ol li dl dt dd

行内元素inline:有多大内容占多大面积a i b

行内块级元素:inline-block:img input select

转换元素:display

设置圆角

border-radius:45px;可以统一设置

border-radius:10px 20px 30px 40px;也可以一个个设置

web技术之CSS