zoukankan      html  css  js  c++  java
  • 前端学习笔记 Css初级篇

    有话先说:我是一只菜鸟,一只都是,从前是现在也是。

    CSS中的会计元素与行内元素

    块级元素特性:
    占据一整行,总是重起一行并且后面的元素也必须另起一行显示。
    内联元素特性:
    和其他内联元素显示在同一行。

    可以知道的是,行内元素和块级元素之间是能够相互转换的。趋于对网页模块化的搭建,后期行内转换为块级的例子会很多很多。

    html中的块级元素列举如下:
     div(文档分区),article(文章内容), aside(伴随内容), audio(音频播放), blockquote(块引用), canvas(绘制图形), dd(定义列表中定义条目描述), dl(定义列表), fieldset(表单元素分组), figcaption(图文信息组标题), figure(图文信息组), footer(区段尾或页尾), form(表单), h1-h6(标题), header(区段头或页头), hgroup(标题组), hr(水平分割线), noscript(不支持脚本或禁用脚本时显示的内容), ol(有序列表), output(表单输出), p(段落), pre(预格式化文本), section(一个页面区段), table(表格), tfoot(表脚注), ul(无序列表), vidio(视频)。

    内联元素列举如下:
    b(粗体), big(大号字体), i(倾斜), small(小号字体), tt(等宽), abbr(缩写), cite(引用), code(计算机代码文本), dfn(定义项目), em(强调), kbd(键盘文本), strong(语气强调), samp(样本文本), var(定义变量), a(链接), bdo(元素可覆盖默认的文本方向), br(换行), img(图像), map(图像映射), object(对象), q(引用), script(定义客户端脚本), span(组合行内元素), sub(下标), sup(上标)
    button(按钮), input(输入), label(标注), select(表单控件), textarea(文本域)。

    CSS样式的类型

    内部样式表(<style>...</style>)

    外部样式表(<link href="style.css" rel="stylesheet"/>)

    内联样式表(<p style="..."></p>)

    border属性

    border-边框宽度;

    border-style:边框样式;(solid 实线,dashed 虚线,dotted 点线,)

    border-color:边框颜色;

    border:边框宽度 边框样式 边框颜色;(常常这样简写)

    常见样式

    结构样式:宽度; height:高度;background:背景;border:边框; padding : 内边距;margin: 外边距;

    文本样式:font-size:文字大小(一般为偶数,最小一般设置为12px)font-family:字体;color:文字颜色;line-hight:行高;text-align:文本对齐方式; text-indent:文本缩进(2em);font-weight:文字着重;font-style:文字倾斜;text-decaration:文本修饰(下划线,上划线,删除线)letter-spacing:字母间距; word-spacing:单词间距;

    background属性

    repeat:背景图重复,默认就是背景图重复,还有no-repeat(背景图不重复),repeat-x(水平轴上背景图重复),repeat-y(竖直背景图重复)10px(x轴),50px(Y轴)也可为负数。center top(水平居中,竖直在顶端),fixed(背景固定,不管怎么拖动滚动条,该背景图都固定在相应位置。)

    background-size:设置背景图的宽高;

    选择器

    类选择器(类选择器在css样式编码中是最常用到,可重复调用,英文圆点开头可任意命名);

    ID选择器(在很多方面,ID选择器都类似于类选择符,但也有一些重要的区别。为标签设置id="ID名称",而不是class="类名称";ID选择符的前面是井号(#)号,而不是英文圆点(.)。)

    子选择器(还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。)

    包含选择器(即加入空格,用于选择指定标签元素下的后辈元素。)

    通用选择器(功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素)

    伪类选择符(它允许给html不存在的标签(标签的某种状态)设置样式)

  • 相关阅读:
    设计一个smartnic
    lshw
    VF PF Reset Tests
    iommu dmar 和虚拟机
    2019-10-31-win10-uwp-访问解决方案文件
    2019-10-31-win10-uwp-访问解决方案文件
    2019-8-31-dotnet-使用-Environment.FailFast-结束程序
    2019-8-31-dotnet-使用-Environment.FailFast-结束程序
    docker dead but pid file exists 问题
    java数据结构(二叉树)
  • 原文地址:https://www.cnblogs.com/hyea/p/5371517.html
Copyright © 2011-2022 走看看