CSS和HTML的一些事

Posted 2020-06-23 随风

CSS

层叠样式表

CSS注释格式/**/   html注释标签是<!--XXX-->

 

添加样式三种方法：优先级降低

1写在元素标签里，行内样式{<p style="font-size:12px;">XXX</p>}会覆盖嵌入样式和链接样式

2嵌入样式是style里的,写在head之间。p{color:red;} 加上style标签的话链接样式便不会被加载

3链接样式也是在head之间，<link href="style.css" rel="stylesheet" type="text/css">

4写在其他样式之前否则不被加载@import url(css/styles2.css)

 

但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面（实际开发中也是这么写的）。其实总结来说，就是--就近原则（离被设置元素越近优先级别越高）。

 

CSS规则命名

1.p {color:red;}

2.h1, h2, h3 {color:red;}

3.再为h3写一条规则h3 {font-size:10px;}

行间距标签是line-height

 

选择符分三类：

上下文祖先同胞选择符：后代元素选择用空格隔开（包括第一代子元素）；第一代子元素section>h2； 紧邻同胞h2+p;  一般同胞h2~p；*通配html中所有标签元素，p*选中孙子元素，非子元素。

多个标签元素设置同一种样式，用分组选择符逗号（，）         

                       

 id和class属性选择，不能以数字特殊符号开头命名；class选择符是点加类名，只选择带该类的标签则标签加类名写一块。多个类名放在一个括号用空格隔开，选择同时存在两个类名的元素：  .类名1.类名2

 id选择符用＃。id与class区别是：html文档中id只能使用一次。class可使用多次，二者均可以用在任何元素上。

 url(#clip)意思是目标id在当前页面中。如果链接的href属性里只有一个#那么点击链接会返回页面顶部。

<a href="#">back to top</a>

使用类让为不同标签名的元素应用相同的样式成为可能。

可以给一个元素指定多个类，多个类名间以空格分隔，为一个元素同时设置多个样式；

也可以给多个元素指定一个类。但是每个元素只能有一个ID，而且这个ID在整个页面中也只能出现一次。

属性有无和特征选择。属性名选择img[title]{XXX}带有title属性的标签被选中,

                                    属性值选择符img[title="red"]

伪类实际上并没有类会附加在标记中的标签上。实际不存在的标签，即是标签的一种状态，分为用户界面UI和结构化伪类

UI基于状态应用样式，链接伪类a:link，a:visited此前点击过，a:hover鼠标悬停，a:active正被点击按下未释放。p:hover段落鼠标悬停的时候添加样式

                                   ：focus伪类，e表示任何元素 e:focus聚焦 

                                     e:target  链接<a href="#info">vvv</a>目标是页面中id为info的元素

样式继承，某些css样式如color支持继承，border不支持。

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。当对同一个标签添加不同样式则根据权值使用相应的样式，权值相同的话应用处于最后面的样式，它会覆盖前面的样式。这就是样式层叠。继承的权值最低。为0.1。p{color:red!important;}为该样式设置最高权值，权值高于用户自己在浏览器中设置的样式。

 

斜体 italic 下划线text-decoration：underline； 删除线text-decoration：line-through；段落缩进text-indent：2em；2em是文字2倍大小。段落行间距设置是line-height：1.5em; 文字间隔字母间隔设置是letter-spacing：50px；单词间距word-spacing：50px；块状元素中文本和图片设置居中样式text-align：center； 

display:block ; 将内部元素显示为块级元素。inline将块级元素设置成内部元素。inline-block将元素设置成内联块状元素如img input。

 

盒子模型：页面元素div是盒子，内容可以是文本图片标签元素，内填充padding，外边距margin，边框border都有四个方向top bottom left right。块级元素都具备盒子模型的特征。

1、border-style（边框样式）常见样式有：dashed（虚线）| dotted（点线）| solid（实线）。

border-width（边框宽度）中的宽度也可以设置为：thin | medium | thick（但不是很常用），最常还是用象素（px）。

border-bottom：2px solid red;只设置下边框。

padding填充可分为上、右、下、左(顺时针)。如果上下一样为10左右一样为20可写为padding：10px 20px; margin类似。

css布局模型建立在盒模型的基础上。

    font-style:italic;
    font-variant:small-caps; 
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋体",sans-serif;

可以缩写成：（至少制定size和family）

 font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;

 

在网页中，元素有三种布局模型：
1、流动模型（Flow）：是默认的网页布局模式，块状元素自上而下顺序垂直延伸分布宽度100%；内部元素从左到右水平分布显示。
2、浮动模型 (Float)：块状元素并排显示设置元素浮动float：left；
3、层模型（Layer）：类似PS中图层精确定位操作，css中position属性来支持层布局模型，absolute绝对定位，relative相对定位，fixed固定定位。

left等使用的时候是父包含块相对其的上下左右位置，与平时的是相反的。

absolute将元素从文档流中拖出来，然后使用left right等属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位，如果不存在这样的块则相对于body即浏览器窗口。

relative通过left等属性确定元素在正常文档流中的偏移位置。首先按照static方式生成一个元素然后相对于以前的位置移动，移动前的位置保留不动。

固定定位与绝对定位类似，从文档流中拖出来，不受文档流和拖动滚动条影响，但是相对移动的坐标是屏幕内网页的视图窗口本身。

参照物不是浏览器，可自由设置，相对其他元素定位：参照定位元素是相对定位元素的前辈元素，且参照元素是relative的，相对定位元素是absolute的可以使用top等属性进行偏移定位。

right和bottom是0的话是右下角。

 

长度值单位设置中有像素，em和百分比，它们都是相对位置。90像素是一英寸，

text-indent文本首行缩进，当给font-size设置单位为em时计算以p的父元素font-size为基础。百分比类似。

 

行内元素居中text-align：center，块状元素：定宽块状设置左右margin为auto实现居中，

不定宽块状：加入table标签，设置display:inline,设置position：relative和left：50%。

 

display：table；clear：both；

具体如下:

加入table标签：为居中元素加入table标签（tbody tr td）；为table设置左右magin居中。

居中元素设置display：inline 父标签text-align：center实现居中。

父元素设置float以及position：relative和left：50%, 子元素设置position：relative和left：-50%实现水平居中。

 

父元素高度确定的单行文本的竖直居中：父元素设置height和line-height高度一致实现。

父元素高度确定的多行文本  图片  块状元素 垂直居中：

方法1：插入table（tbody tr td）同时设置vertical-align：middle。必须结合二者使用。

方法2：设置块状元素display：table-cell;  vertical-align:middle.

隐性改变display：position：absolute  /  float:left或right可设置元素width height

 

HTML

　　CSS用途是为HTML标记添加样式，设置网页布局。最常用的HTML标签描述的是标题，段落，链接和图片。HTML5新规定了一批结构化标签，用于对相关内容的标签进行分组，从而更好的规范网页的整体结构。这些新标签包括header,nav,article,section,aside,footer.

　　HTML标签及其属性http://htmldog.com/reference/htmltags

　　块级标签：默认充满整行，互相堆叠向下排列。<h1>---<h6> <p><ol><li><blockquote引用>，div ,ul  , dl , table, address , form .

    html实体<blockquote>&ldquo;tianxiaodi&rdquo;</blockquote> 结果是“tianxiaodi”

　　行内标签：互相并列，只有当尺寸超过行内宽度才会换行<a><img>...<em>表示强调，一般浏览器会使用斜体表示。<strong><abbr><cite><q> span , br, i , label , var, cite , code.

      <abbr title="as soon as possible">ASAP</abbr>

      内联块状标签元素：img   input.

 

块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

 

内联元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

 

inline-block元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

Html标签有head和body两个子标签,head包含meta和title。html注释标签是<!--XXX-->

文档流：html元素会按照它们各自在标记中出现的先后顺序，依次从页面上方流向下方。

几乎所有html元素的display属性要么block要么inline，table元素有自己的display属性值。

article标签

安装web developer:查看html css JS的工具>Firefox工具栏--附加组件--附加组件管理器搜web developer安装。

文档对象模型--DOM：父元素，子元素，同胞元素，后代元素，祖先元素