zoukankan      html  css  js  c++  java
  • CSS个人笔记(记得要补(补了一点))

    创建方式

    • 元素内嵌样式(不同属性值需要用分号分开)

      eg

        <a style="font-size:40px;color:#ffad2a">这是元素内嵌样式<a>
    • 文档内嵌样式(一般放在<head>里)

      eg

       <style type="text/css">
           a{
               font-size:40px;
               color:#ffad2a;
          }
       <style>
    • 外部样式(需要创建一个新的CSS文档,如a.css文档,然后引入至html文档 ,如<link rel="stylesheet" type="text/css" href="a.css">

      eg

       a{
        font-size:40px;
        color:#ffad2a;
       }
    • 样式表层叠方式优先考虑元素内嵌样式表,然后是文档样式表,最后是外部样式表(元素内嵌样式表>文档内嵌样式表>外部样式表)

    • 导入式会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题,如果网页比较大则会儿出现先显示无样式的页面,闪烁一下之后,再出现网页的样式。这是导入式固有的一个缺陷。使用**链接式**时与导入式不同的是它会以网页文件主体装载前装载CSS文件,因此**显示出来的网页从一开始就是带样式的**效果的,它不会像导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点。

      所以还是推荐用链接式

    选择器

    • 选择所有元素

      style元素:*{}

    • 根据类型选择元素

      style元素:a{}

      body元素:

       <a>这是根据类型选择元素</a>
    • 根据类选择元素

      style元素:.class1{}

      body元素:

       <a class="class1">这是根据类选择元素</a>
    • 根据ID选择元素

      style元素:#id1{}

      body元素:

       <p id="id1">这是根据id选择元素</p>
    • 根据属性选择元素

      style元素:[href]{}

      body元素:

       <a href="text.html">这是根据属性选择元素</a>
    • 选择器动作

    • 选择器仅出现在文档内嵌样式或外部样式中

    边框和背景

    • 边框设置

      • border-width:边框的宽度

      • border-style:边框的样式类型

      • border-color:边框的颜色

      • border:宽度,样式,颜色

      • border-top:上边框

      • border-radius:圆角边框

    • 背景设置

      • background-image:背景图片

      • background-repeat:背景重复方式

        • repeat-x:在水平方向重复

        • repeat-y:在垂直方向重复

        • no-repeat:仅显示一次

        • repeat:默认,在水平,垂直方向重复

      • background-position:背景图像的起始位置

        • center,等

      • background-attachment:背景是否随滚轮移动

        • scroll:默认,会随着滚轮而滚动

        • fixed:不会

      • background-color:背景颜色

    文本样式

    • text-aline:对齐文本

      • center,left,right

    • direction:文本方向

    • letter-spacing:字母(文字)间距

    • word-spacing:单词间距(仅英文单词)

    • line-height:行高

    • text-indent:首行缩进

    • text-decoration:文本装饰

      • underline:下划线

      • overline:上划线

      • line-through:中划线(删除线)

    • text-transform:文本大小写转换

      • capitalized:首字母大写

      • uppercase:全部字母大写

      • lowercase:全部字母小写

    • font-family:字体

    • font-size:大小

    • font-style:字体样式

      • oblique:倾斜

      • italic:斜体

    • font-weight:字体粗细

    • text-shadow:文本阴影(水平偏移,垂直偏移,模糊程度,模糊颜色)

    盒子模型

    盒子模型:每一个小城的组件都可以看作是一个盒子模型

    组成:content padding margin border

    • contain:内容,由宽(width)与高(height)组成

      • view组件的宽高会由内容自动撑大

      • 可以设定宽高来限制view

      • 应用:放图片的时候,通常会拿一个view限制它大小

    • padding:内边距,内容到边框的距离(上下左右)

      • 直接使用padding设置间距的话,默认会自动撑大宽高,撑大的大小为间距的大小

      • 使用box-sizing,可以使得间距的高度从内容的高度里面减

    • margin:外边距边框到下一个边框的距离(上下左右)

    • border:边框样式、颜色、粗细、圆角、阴影

    • 我又肥来了,由于之前在实训,就耽搁了(其实就是实训前我懒了),然后又开始了

    • 这个只写了这一部分,后面的那些等以后有空了再整理吧(可能就没有以后了),写的真的是越来越烂,越来越少了,再说吧,最近想好好巩固一下,好久没有学了

  • 相关阅读:
    由于缺少调试目标"……",Visual Studio无法开始调试。请生成项目并重试……
    设置ComboBox的只能选择属性
    双缓冲画线示例
    给控件添加背景透明
    设置播放器声音
    使用DotNetBar中的ContextMenuBar实现鼠标右键上下文菜单
    导入注册表文件,注册dll
    使用ImageConverter转换图标
    百度统计api 关于搜索引擎返回参数问题
    tp5.0 SHOW COLUMNS FROM 生成数据表字段缓存
  • 原文地址:https://www.cnblogs.com/bell-ld/p/13246062.html
Copyright © 2011-2022 走看看