zoukankan      html  css  js  c++  java
  • css:层叠样式表-网页布局基础

    css:层叠样式表:
    一、写法分类:
    1.内联(行内,写在标签里面,以属性的形式表现,属性名是style)
    例:<table style="background-color: aqua" >
    <tr><td>123</td></tr>
    </table>

    例:<span id="biaoqian" style="color: #F40F13 ;font-size: 20px">123</span>
    2.内嵌(写在head标签里面,以标签的形式表现,标签名style)
    例:<style type="text/css">
    </style>
    3.外部引用
    二、
    样式格式:
    样式名1:样式值1;样式名2:样式值2;
    三、
    (1)选择器(内联和外部引用所用):
    选择器{
    样式名1:样式值1;
    样式名2:样式值2;
    }
    选择器类型:
    标签选择器:标签名{}
    id选择器:#id属性值{}
    class选择器:.class属性值{} ---class="dd sss"(可用多个样式)
    并列选择器: 选择器1,选择器2{样式内容}
    后代选择器: 选择器1 选择器2 {}----------在选择器1里找到 选择器2的样式
    直接子标签选择器: 选择器1>选择器2{}
    属性选择器: 选择器[属性名='属性值']{}
    四、
    css样式优先级(权值越高优先级越高)
    行内:-----1000
    id :-----100
    class:-----10
    标签:-------1
    *(通用选择器):--0
    优先级关系:内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
    五、
    css一般样式:文本,背景,字体,列表
    (1)一般样式标签背景
    background-color
    background-image css选背景是相对于css文件本身寻找
    background-repeat
    background-attachment
    background-position
    简写:
    background:color image repeat position
    (2)一般样式文本
    text-*
    text-color 设置文本颜色
    direction 设置文本方向。
    letter-spacing 设置字符间距
    line-height 设置行高
    text-align 对齐元素中的文本
    text-decoration 向文本添加修饰
    text-indent 缩进元素中文本的首行
    text-shadow 设置文本阴影
    text-transform 控制元素中的字母
    unicode-bidi 设置或返回文本是否被重写
    vertical-align 设置元素的垂直对齐
    white-space 设置元素中空白的处理方式
    word-spacing 设置字间距
    (3)一般样式字体:
    font 在一个声明中设置所有的字体属性
    font-family 指定文本的字体系列
    font-size 指定文本的字体大小
    font-style 指定文本的字体样式
    font-variant 以小型大写字体或者正常字体显示文本。
    font-weight 指定字体的粗细。
    (4)一般样式列表:
    list-style-type 设置列表项标记的类型。
    list-style-position 设置在何处放置列表项标记。
    list-style-image 使用图像来替换列表项的标记。
    initial 将这个属性设置为默认值。
    inherit 规定应该从父元素继承 list-style 属性的值。

    布局:浮动,定位,显示,层级,轮廓
    1.浮动:float:left right(设一个父标签 设定宽高,里面可以随便浮动)
    超出部分: overflow: hidden隐藏 scorll加滚动条
    overflow-x:
    overflow-y:
    盒子模型:
    从里到外:内容->内边距->边框->外边距
    对应样式:内容->padding->border->margin
    盒子模型的样式分上下左右
    top left right bottom
    盒子模型自适应:box-sizing:border-box
    margin 第一个子标签设置magin会作用到父标签
    2.定位

    postion:
    绝对定位:fixed :(相对窗口定位通过上下左右调位置)
    absolute:(相对body定位-相对于最近的有position样式属性的父标签(给父标签加一个relative)定位 到body为止)
    相对定位:relative 相对自身定位 通常用来限制子标签的absolute
    有自身位置,通常用来微调
    3.层级
    z-index:值---值越大越靠上层
    4.显示
    display
    visibility

    布局页面的步骤   即大色块 小色块 ... 内容
    布局:浮动,定位,显示,盒子模型,层级
    浮动: float : left right
    设一个父标签 设定宽高,里面随便浮动,
    超出部分:overflow: hidden scorll
    overflow-x:
    overflow-y:

  • 相关阅读:
    很多的技术招聘面试方式不务实-导致不仅难以招聘到人,而且严重损害公司形象
    技术工作者上升到思想,哲学层面也许更好
    程序员与架构师的区别
    (转载)创业型公司如何管理-吸引人才
    C#图片转成流,流转成图片,字节转图片,图片转字节的方法
    C# Linq获取两个List或数组的差集交集
    C# List排序,附加使用Linq排序
    C#Qrcode生成二维码支持中文,带图片,带文字
    C#判断本地文件,网络文件是否存在是否存在
    C#WebBrowser控件使用教程与技巧收集
  • 原文地址:https://www.cnblogs.com/lemon-Net-Skill/p/9295670.html
Copyright © 2011-2022 走看看