Python全栈工程师（31：css）_学html css javascript和python算不算全栈工程师? site:blog.csd-CSDN博客

css属性设置方法：

方式1：在标签上设置style属性；

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

方式2:放在head里添加css模式；

<head><style>

#i1，#i2{ height:10px ; width:10px； } /*id选择器*/

.c1{ height:10px ; width:10px； } /*class选择器*/

div{ height:10px ; width:10px； } /*标签选择器*/

span div{ height:10px ; width:10px； } /*层级选择器：span下面的div属性*/

.c1[key=value]{ height:10px ; width:10px； } /*属性选择器:对选择到的标签再通过属性再进行一次筛选*/

</style></head>

注：css里面的注释方法/*被注释的内容*/

方式3：引入外部link

<link rek="stylesheet" herf=“common.css”/>

单独文件common.css中定义属性；

选择器的优先级：标签上的style优先；css样式写在最下面的优先级高（就近原则）；

css属性

--边框：

-宽度、样式、颜色（boarder：1px solid red）
-boarder-left等；

--高度：

height：48px

height：50% /*一般不需要*/

--宽度：

width：48px

width：50%

--字体：

字体大小：font-size:16px

字体加粗：font-weight：

字体颜色：color：red

--居中：

text-align:center /*水平方向根据div居中*/

line-height：48px /*垂直方向根据div居中*/

--背景色：

background-color：red；

--float：

让标签飘起来，块级标签堆叠；left、right

父亲没有被撑起来：在最末尾加style=“clear：both；”让父框变得可控；

--display：

显示格式：inline、block、inline-block、none（消失）

inline-block：具有inline默认自己有多少占多少；具有block，可以设置高度，宽度，padding，margin

行内标签：无法设置高度，宽度，padding margin

块级标签：设置高度，宽度，padding margin

--边距：

padding：内部边距；

margin：外部边距；margin：0 auto；

css重用：

重复的属性放在共同的样式里面；

独特的放在自己的样式里面；

自适应和改变大小变形：

左右滚动条的出现；

宽度和百分比（会随着页面的缩小出现变形--->在页面的最外层设置像素的宽度==>最外层设置绝对宽度，会自动出现滚动条）；

注意1：
窗口最外面的宽度定义为绝对宽度，里面按照百分比设置；

自适应media；

a标签在IE浏览器出现蓝色框：里面的img继承a的蓝色字体颜色，可以设置img的border为0；

form表单action、method：post和get；get以?name=输入&name=输入的格式提交；post包含请求头和请求内容；表单里面包含文件要设置enctype属性；

display块级和行级转换；

float div末尾要清除clear：both; 目的是重新掌控它里面的子模块；

margin：0 auto；

padding：自身发生变化；

position:
--fixted 固定在页面的某个位置；
--relative+absolute; <div style="position:relative"><div style="absolute"></div></div>
--opacity:透明度设置0-1
--z-index:层级顺序谁最大谁在上面;
--margin-left：-23px 左移23px；

overflow：
如果里面的图片大小大于外部div的大小则设置overflow
--hidden 隐藏
--auto 滚动条
若想全部看到：设置图片的大小

hover：
当鼠标移动到menu时调用hover属性；
#pg-header .menu :hover{background-color:blue;}

background：
--background-color：背景颜色；
--background-image：背景图片；Eg：background-image：url（'image.jpg'）;默认div大，图片重复堆叠
--background-repeat：no-repeat；或者repeat-x；repeat-y；
拿一整张图，获取图像的一部分：
--background-position： x y 等同于
--background-position-x： x
--background-position-y： y