web前端笔记

css选择器

• 标记选择器，如 <div>,<p>标签p{}

• id选择器 ,#id{}

• class选择器==.类名{}==

• 通配符选择器==*{}==

css文件外部链接

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

属性与属性之间用空格隔开，不是用逗号

HTML标签

双标签
<p> 段落标签
标题标签 <h1>~<h6>
<font size="" color="" face="字体">字体样式标签
<img src="图像url" width="" height="" alt="">
<strong> 粗体
<em></em>斜体

css字体样式

font-size:字体大小
font-family:字体
font-weight:字体粗细
font-variant:变体
font-style:字体 风格
font:综合设置，必须保留font-family，和font-size

font-weight

bold	粗体
bolder	更粗
lighter	更细

css文本外观和排版

color;文字颜色
letter-spacing:字符间距
word-spacing:单词间距，对中文无效
line-height:行间距
text-transform:文本转换，首字母大写:capitalize...
text-decoration;文本装饰,下划线:underline...
text-align;文本对齐方式，center居中

css复合选择器

• 交集选择器

第一个为标记选择器，第二个为类选择器或id选择器，两个选择器之间不能有空格

• 后代选择器

外层标记+内层标记，中间用空格隔开

• 并集选择器

任何选择器，用逗号隔开

css继承性和层叠性

css优先级

• 权重计算,数值越大权重越高

标记选择器 权重为1
类选择器  权重为10
id选择器 权重为100

• 特殊情况

1.子元素定义样式会覆盖继承来的样式
2.行内样式优先
3.权重相同，css遵循就近原则
4.！important定义最大优先级

css盒子

外边距padding 内边距margin 边框 border

边框属性

top left bottom right 例如：border-top-style

综合属性：宽度，样式，颜色，顺序不限，省略部分设默认值

• border-style

solid单实线
dashed虚线
dotted点线
double双实线

• border-width
• border-color

对div盒子定义的css样式的width和height无法控制图像的大小问题

内边距(padding)

padding-top
padding-bottom
padding-left
padding-right
padding综合属性：一个值(上下左右),两个值(上下/左右)，三个值(上/左右/下)

外边距(margin)

如果margin和padding的值设为百分比，则其随着父元素的width和height变化而变化

==margin：上下 左右[10px auto]==实现居中效果

背景(在css中定义)

background-color: ;
background-image:url(路径);
background-repeat:;[repeat|repeat-x|repeat-y|no-repeat]
background-position:;[只在背景图设置为不平铺时有效,默认值为top left，俩个值之间用空格隔开]
background-attchment:[fixed|scroll];
background:背景色 url("") 平铺 定位 固定;[综合属性，值与值之间用空格隔开 ]

块元素和行内元素

• 常见块元素

<div></div>
<h1>~<h6>
<p>
<ul>
<ol>
<li>

• 常见行内元素

strong加粗
b
em斜体
i
del删除线
s
ins
u下划线
a
span

• 行内元素与块元素的转换

display:[]
inline 行内元素
block 块元素
inline-block 行内块元素
none 将此元素隐藏

有序列表和无序列表

无序列表

<ul>[explain:unOrderList]
    <li>列表项1</li>
    <li>列表项2</li>
    ......
</ul>

ul和li都有type属性

disc	充实的黑圆点
circle	空心圆点
square	充实的正方形

有序列表

<ol>  [orderlist]
    <li></li>
    <li></li>
    ...
</ol>

css颜色

• 六位数的16进制或三位数

#ff0000表示红色
#0f0绿色
#fff白色
#00f蓝色

• rgb(256,256,256)

RGB(0,0,256)表示蓝色

定义列表

<dl>
    <dt></dt>
    <dd></dd>
    <dd></dd>
</dl>

超链接<a>

<a href="url" target="弹出方式">文本或图像</a>

• target值：_self (在此窗口打开)和 _blank（新窗口)

• href=“#”,空

链接伪类

a:link	未访问时
a:visited	访问后
a:hover	鼠标悬停时

锚点链接

用于快速定位到用户目标内容,<a href="#id">链接文本</a>

表单

表单域

<form action="url" name="表单名" method="提交方式[get|post]">
    
</form>

input控件

• type

text	单行文本
password	密码输入
radio	单选框
checkbox	复选框
button	普通按键
submit	提交按钮
reset
image
hidden
file

• name 控件名
• value 控件中默认文本
• checked定义默认选择项
• maxlength最大长度

select控件

浮动和定位

将需要环绕的图片设为浮动元素，实现文字环绕的效果,定义浮动

float:[left|right|none]

伪类与伪元素

伪类

• 状态类：

:link :visited :hover :active :focus

• 结构类

:first-child :second-child :nth-child :nth-of-type

• 表单类

:checked :disabled :invalid :required

• 语言类

:dir :lang

伪元素

::before ::after  ::first-letter ::first-line ::selection ::placeholder ::backdrop

flex布局

• 对父元素设置属性布局子元素

display: flex

• 常用的父项属性

flex-direction:设置主轴的方向[row|column|row-reverse|column-reverse]
justify-content:设置主轴上元素的排列方式[flex-start|flex-end|center|space-around|space-between]
flow-wrap:是否换行
align-items:设置侧轴上的子元素排列方式(单行)
align-content:(多行)[与justify-content属性值相同|stretch]
flex-wrap：flex-direction与flex-wrap的复合属性

• 主轴与侧轴

• flex常见子项属性

align-self:[跟父项相同]
flex:[number|default:0]
order

flex-direction:设置主轴的方向[row|column|row-reverse|column-reverse]
justify-content:设置主轴上元素的排列方式[flex-start|flex-end|center|space-around|space-between]
flow-wrap:是否换行
align-items:设置侧轴上的子元素排列方式(单行)
align-content:(多行)[与justify-content属性值相同|stretch]
flex-wrap：flex-direction与flex-wrap的复合属性

• 主轴与侧轴

• flex常见子项属性

align-self:[跟父项相同]
flex:[number|default:0]
order