CSS

css基本语法

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

选择器：选中页面中的标签。

属性：设置标签的特性，特征。

值：与属性相对应的值。

三种形式

行内样式

在HTML标签上，使用style的属性设置css样式

<标签名 style="属性:值;属性:值;"></标签名>

内部样式

style写在head标签的后面,可以实现共享

<head><style>h1{color:red;}</style>
</head>

外部样式

写在独立的css文件内，以css后缀结尾

在使用css的html的页面，要使用内链,到title后面

/*index.css*/
h2{border:10px solid blue;
}

<head><meta charset="utf-8"><title></title>
<!-- 内联形式 --><link rel="stylesheet" type="text/css" href="css/index.css">
</head>

一般用外部样式，高内聚，低耦合，代码复用性强

优先级

采用就近原则行内>内部和外部，内外部看link与style位置

选择器

标签选择器(范围大)

标签名{}

ID选择器(精度高)

html标签都可以定义一个id属性,作为该标签在页面中的唯一标识，更加准确

<标签名 id=“值”>

ID选择器的语法

#ID值{属性:值;
}

Class选择器

HTML都可以设置class属性值。允许一个页面多个标签设置为相同class值，一个标签也可以有多个class值，最常用

<标签名 class="值1 值2 值3">

.值1{color:red;
}

属性选择器

[属性名='属性值']{}

层次选择器

祖孙选择器

先选祖先元素，从中查找后代，在祖先选择器内部选择元素，（限定范围）

祖先选择器 后代选择器{}

父子选择器

只能往下查找一代子孙，不会一直向下挖

父选择器>子选择器{}

兄弟选择器

选择相同父选择器下元素

兄选择器+弟选择器{}
兄选择器~弟选择器{}

常用属性

尺寸

width :min-width,max-width

height:min-height,max-height

单位：像素，百分比

注意：对于display属性为inline的元素，尺寸设置不起作用

针对不同分辨率的屏幕

字体

color:设置字体颜色

font-size：设置字体大小，单位是像素px；

font-weight：bold 100~800,一般400

font-family：(字体类型)

font-align：对齐方式，left,right,center

text-decoration：装饰线,none

背景

background:背景颜色和图片

background-color:颜色

颜色名：red/grean,十六进制：#RGB，#RRGGBB，#RGBA，6位16场子

制函数：rgb(255,255,255), rgba(255,255,255,1);

backgrounf-img ：图片 (url地址) 存在平铺，小图片重复出现，用到repeat

background-repeat：图片是否重复

background-position：图片位置

盒子模型

html元素，在页面中都占有一个矩形区域

红色是蓝色的内容，白色margi，绿色border，蓝色padding

边框

border：宽度，类型，颜色

border-radios：圆角

外边距 margin

元素边框到外部其他元素的距离

左右方向的外边距不会超出父元素，也不重合

上下方向的外边距可以超出父元素外面去，也可能重合（可以通过设置其他元素来保证不出界，比如border）

内边距 padding

元素的边框到他的内容之间的距离

浮动

HTML标准文档流（DOM流）

所以html标签中，有两种排列方式

1）行内元素：从左向右排序，一行无法显示才换行

分两类：行内，行内块

<a> <img> <b> <strong> <i> <em> <sup> <sub> <span> <td> <th> <input> <select> <textarea> <button>

2）块级元素：默认从上往下排列，每个元素独占一行

<h1>~<h6> <p> <ul> <ol> <dl> <li> <dt> <dd> <table> <tr> <form> <div>

display属性：html标签的显示属性，block（块），inline(行内不可设置宽度高度), inline-block（行内块可以设置）, none(不显示)。

虽然display是可以改变元素的显示方式的，但是一般不建议

如果一个inline需要该，可以变成inline-block

什么是浮动

通过一个float属性，让元素脱离HTML的标准文档流。将元素的排列方式变成从左向右或者从右向左

超脱但不完全

清除浮动

把消失的空间找回来

1）父元素设置固定高度

2）在浮动元素的后面添加一个块级元素

3）伪元素(推荐) 设置一个浮动元素的父元素的伪元素

::before在头部添加伪元素
::after 尾部

定位

脱离标准文档流，到html的上面 css（层叠样式表）

能让元素重叠的唯一方式

相对定位

1）相对定位的元素，在dom流中的位置不会消失（其他元素位置不变）

2）相对于原始位置的变化

position:relative;
top：100px;

相对原来的元素向top的反方向移动100px

绝对定位

1）原来dom中的元素也会消失

2）相对于离他最近的已经定位的父元素进行偏移，如果父标签都无定位，那么相对于标签(根标签自左上到右下 )进行偏移

position:absolute;
top:100px;    //无定位情况下，表示距离html上部100px;

固定定位

1）原来dom中的元素也会消失

2)相对于浏览器的窗口进行偏移

position:fixed;

固定与绝对定位会脱离浏览器控制，变得自由，将会自动适应，只将子元素显示出来就停止。

伪类样式

选择器:伪类样式         选择器:nth-child(下标)
first-child

选择器:nth-child(下标)

在选取的元素中，再根据下标的顺序查找元素，从1开始

主要键对超链接有四种状态

1.未访问链接

:linked

2.已访问链接

:visited

3.鼠标移上

:hover

4.鼠标移下

HTML+CSS布局

1）先从上往下分成多个块

2）再自左向右分成多个块

3）CSS填充每一个细节

风尚堂规划框架

导航栏

banner

主体

页脚

阿贾克斯懒加载

京东图片懒加载

小学期前端实训笔记（2）-css【菜狗级】相关推荐

小学期web实训笔记（1）-html【菜狗级】
HTML 相关知识 HTML不具有运算功能 html以标签的形式组织页面的内容,只能用默认的枯燥格式. css(层叠样式表)决定怎样表示内容(颜色,字体,图片大小),更丰富多彩. <标签名属性 ...
web前端实训作业 html+css+javascript 水果网页设计实例企业网站制作
web前端实训作业 html+css+javascript 仿果然新鲜水果(6页面)网页设计实例企业网站制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无 ...
【HNU小学期硬件实训】基于QT上位机的汽车监控警报系统
测试视频已上传到b站: 基于QT上位机的汽车监控警报系统一.绪论本次实验的选题是基于 QT 上位机的汽车行驶监控警报系统,灵感来源于本人在行驶电动车过程中遇到的问题,为汽车模拟了不同的场景,外接 ...
7.9小学期校外实训报告
一.背景由于我们是信息学院大类招生入学,小学期(第三学期专业分流),总体来说大一一年学的主要是通识课,同学们对计算机类这一个块大的领域可能不是很了解,校外实训提供了这样一个机会:走向社会.接触社会. ...
web前端实训作业 html+css+javascript 水果超市网页设计实例企业网站制作
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游戏. 节日. ...
hnu小学期软件实训-拳王阿里
[问题描述] 阿里是上个世纪美国最著名的拳击手,阿里在20年的时间里多次获得重量级拳王称号.不过不幸的是,他在之后患上了帕金森氏病.他参加了许多比赛,多到连自己都数不清了. 有这么一段时间,他 ...
css+js+jq实训笔记
css+js+jq实训笔记 css第一天 css第二天 css第三天 css第四天 css第五天 css第六天 js第一天 js第二天 js第三天 js第四天 js第五天 js第六天 jq第一天 jq ...
web前端实训大作业：餐饮网站设计——美食城(7个页面) HTML+CSS+JavaScript
web前端实训大作业:餐饮网站设计--美食城(5个页面) HTML+CSS+JavaScript 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要 ...
2022-2023第一学期微信小程序期末实训报告
2022-2023第一学期微信小程序期末实训报告微信小程序小程实训报告 2022-2023第一学期微信小程序期末实训报告前言一.微信小程序简介二.微信小程序布局三.微信小程序实现,分页面展示 ...

小学期前端实训笔记（2）-css【菜狗级】

CSS