css html 语法,HTML+CSS基本语法构造

ゞ浴缸里的玫瑰 2022-10-09 04:59 258阅读 0赞

每一行中的一个列

![%E5%9B%BE%E7%89%87%E6%BA%90][E5_9B_BE_E7_89_87_E6_BA_90]  图片声明 title鼠标在图片上面可以显示图片标题

from表单声明  method分享方法(一般是post) action 行为一般上传到哪

标签一般输入文本

一般用于显示文本框 密码框 按键

type一般有几中形式text文本框   password密码框   submit提交按钮   reset重置按钮 radio单选 checked 多选

id一般用于后面文件处理时的名称

value是上传的值 比如radio中 男女例子   男是1   女是2

复选下拉框

option 下拉框选项

CSS中样式有三种----内联式>嵌入式>外部式

内联式：直接在文本中使用，在文本中声明。如：文本

嵌入式:在head之间声明,在文本中使用

外部式：在此html文件外创建一个css文件。文件里面写样式，然后在head之间 用

选择器一般有八种，标签选择器，类选择器，ID选择器，子代选择器，后代选择器，伪选择器，通用选择器，分组选择器；

这里所说的选择器一般指的是CSS样式，在head之间

标签选择器：直接用标签进行样式选择：例如：p\{  font-size：20px; color:\#000; \}

类选择器：声明样式时前面加点(这个  .    )，使用时声明class=""；来选择哪个类的,例如：  .stress\{ font-size：20px; color:\#000; \}

文本

ID选择器：声明样式时前面加点(这个  \#   )，使用时声明id=""；来选择哪个类的,例如：  \#stress\{ font-size：20px; color:\#000; \}

文本

子选择器：即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码：  .food>li\{border:1px solid red;\} 只延生使用在指定的下一代，也就是说第一代的 li 标签会使用这种样式，而如果此代下面还有 li 标签，那下代 li 标签不适用

后代选择器：故名思意，与子代选择器的区别是子代是延生一代，而后代则是所有的后代，孙子，重孙，，，等等是要是后代都使用此样式，例如： .food   li\{border:1px solid red;\}

通用选择器：所有样式得使用都不用指定，自动给所有加上，例如：\* \{color:red;\}

伪选择器：它允许给html不存在的标签(标签的某种状态)设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：a:hover\{color:red;\}   一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。因为兼容性，现在比较常用的还是 a:hover 的组合。

分组选择器：可以同时设置多种标签，例如：p,span,.stress\{color:blue; \}，给三个标签设置了同种样式

CSS的继承、层叠和特殊性

继承：继承就是此标签样式不仅应用自己，也应用其后代，但border这种样式不适用

特殊性：有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢？权值就诞生了，权值高的被使用，标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。可以叠加。注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

层叠：如果应用的标签一样，权值相同，那怎么办呢，那么谁最后声明用谁，

重要性：我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。例如：p\{color:red !important;\}

CSS格式化排版

字体：例   font-family:"宋体";

字号，颜色：   font-size:20px; color:red;

粗体：font-weight;blod;

斜体：font-style:italic;

下划线：text-decoration:underline;

删除线：text-decoration:line-through;

首行缩进：text-indent:2em;

行高：line-height:2em;

字体间距：letter-spacing:   20 px;

对齐：text-align:center;

元素分类

常用的块状元素有：

、

...、、、、、、、常用的内联元素有：

常用的内联块状元素有：

![1292633018573332480.htm][]、

盒模型

边框：例如：

div\{

border-width:2px;

border-style:solid;

border-color:red;

border-style(边框样式)常见样式有：

dashed(虚线)| dotted(点线)| solid(实线)。

border-color(边框颜色)中的颜色可设置为十六进制颜色，如:

border-color:\#888;//前面的井号不要忘掉。

border-width(边框宽度)中的宽度也可以设置为：

thin | medium | thick(但不是很常用)，最常还是用像素(px)。

同样可以使用下面代码实现分别四边边框的设置：

border-top:1px solid red;

border-right:1px solid red;

border-left:1px solid red;

border-bottom:1px solid red;

可以使用任意一种；

宽度和高度：

因此一个元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

![5453167d80d29238e4a9153e4b38a096.png][]

元素的高度也是同理。

比如：

css代码：

div\{

width:200px;

padding:20px;

border:1px solid red;

margin:10px;

填充：元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码：div\{padding:20px 10px 15px 30px;\}

顺序一定不要搞混。可以分开写上面代码：

div\{

padding-top:20px;

padding-right:10px;

padding-bottom:15px;

padding-left:30px;

边界：边界依然，元素与其它元素之间的距离可以使用边界(margin)来设置。边界也是可分为上、右、下、左。如下代码：div\{margin:20px 10px 15px 30px;\}

也可以分开写：

div\{

margin-top:20px;

margin-right:10px;

margin-bottom:15px;

margin-left:30px;

css布局模型

在网页中，元素有三种布局模型：

1、流动模型(Flow)

2、浮动模型 (Float)

3、层模型(Layer)

流动模型自带模型

浮动模型： float:left;  靠左

层次模型：

1、绝对定位(position: absolute)

2、相对定位(position: relative)

3、固定定位(position: fixed)

如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元                           素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进                           行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

使用position:absolute可以实现被设置元素相对于浏览器(body)设置定位以后，大家有没有想过可不可以相                          对于其它元素进行定位呢？答案是肯定的，当然可以。使用position:relative来帮忙，但是必须遵守下面规范：

1、参照定位的元素必须是相对定位元素的前辈元素

2、参照定位的元素必须加入position:relative;

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

盒模型代码简写

还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方         向设置的：上右下左。具体应用在margin和padding的例子如下：

margin:10px 15px 12px 14px;/\*上设置为10px、右设置为15px、下设置为12px、左设置为14px\*/

京ICP备09083238号

[E5_9B_BE_E7_89_87_E6_BA_90]: https://www.it610.com/article/%E5%9B%BE%E7%89%87%E6%BA%90
[1292633018573332480.htm]: /images/20221005/f62b31674ce74f2a8b02a74190c7a294.png
[5453167d80d29238e4a9153e4b38a096.png]: /images/20221005/0747f33c26a64ec789fa0a001a8ddbb9.png