zoukankan      html  css  js  c++  java
  • CSS样式表

    CSS指层叠样式表,样式定义如何显示HTML中的元素
    样式通常存储在样式表中,把样式添加到HTML4.0中是为了解决内容与表现分离的问题
    外部样式表可以极大的提高工作效率,外部样式表通常存储在CSS文件中,多个样式定义可层叠

    当同一个HTML元素被不止一个样式定义时
    1.浏览器的缺省设置
    2.外部样式表
    3.内部样式表<head头部>
    4.内联样式表<HTML标签元素内部>
    冲上往下优先级增大。

    CSS语法由两个主要部分组成:选择器,以及一条或多条声明
    选择器通常是您所需要改变样式的元素
    每条声明由一个属性和一个值组成
    如对h1标签元素的样式表h1{color:red;font-size:14px}
    注意每行尽量只描述一个属性,增强可读性,且当值时多个单词组成的时候要加双引号
    对选择器进行分组,用逗号隔开多个选择器共享一个样式表
    h1,h2,table{color:green}
    CSS存在继承关系,父标签元素的所有属性都会被内部子标签元素所继承,当需要摆脱父标签元素属性时,单独定义此标签属性样式即可

    派生选择器
    通过依据元素在其位置的上下文关系来定义样式,即选择器中同时包含标签元素的嵌套关系
    h2 strong{color:red}
    <p><strong>不会影响到我</strong></p>
    <h2>也不会影响到我</h2>
    <h2><strong>看我的样式红了吧</strong></h2>

    id选择器
    id选择器可以为标有特定的HTML元素指定特定的样式。
    id选择器以#来定义。
    #id{color:red;}
    id选择器通常与派生选择器相结合使用
    #id p{color:red;}
    指定id的标签元素内的p标签元素是红色的

    类选择器
    类选择其以一个点号开头显示,在标签元素内定义类名,根据相同类名的样式表进行显示
    .center{text-align:center}
    <h1 class="center">居中了</h1>
    注意类名第一字符不能是数字
    类选择器也可以用来制作派生选择器
    .fancy td{color:red;}此处是fancy包含td
    td.fancy{color:red;}此处是td包含fancy

    属性选择器
    可以为拥有指定属性的HTML标签元素设置样式
    [title]{color:red;}属性具有title的标签元素全变成红色
    [title~=hello]{color:red;}属性title值中包含指定值时会被应用该样式,注意是包含不是等于,是否包含适用于由空格分割的属性
    [title|=hello]{color:red}与上面的效果一样,只不过是否包含的判断依据除了空格之外,连字符-也是分割成两部分来判断

    对于不具有id,class的表单标签元素来说属性选择器尤为重要

    插入样式表的三种方法
    1.外部样式表
    <head>头部内使用<link rel="stylesheet" type="text/css" href="mystyle.css">标签连接到样式表
    2.内部样式表
    <head>头部内定义<style>标签属性将样式定义在内部
    3。内联样式表
    直接在标签元素内部定义style样式属性,但是由于将显示与样式同时进行所以不灵活

    注意点当同一个属性在不同的样式表中被同样的选择器来定义,那么属性值从更具体的样式中被继承过来,

    css背景
    background
    background-color
    background-imag:url(.gif);
    backgroubd-repeat:repeat-x/y背景平铺按照x或者y方向
    backgroubd-position:center背景位置
    background-attachment:fixed取消背景图片与显示层文档的关联,即背景图片不会随着前曾德滚动而滚动

    text
    text-indent缩进
    text-algin水平对其
    word-spacing字间隔
    letter-spacing字母间隔
    text-transform字符转换可以用来处理大小写
    text-decoration文本修饰blink闪烁,underline下划线

    font
    font-family指定字体系列

    链接的四种状态
    a:link普通的违背访问的
    a;visited已被访问的
    a:hover鼠标指针在上方的
    a:active连接被点击的时刻

    伪类
    连接的四种状态就是伪类

    .before h1{}插入
    .after h1{}

  • 相关阅读:
    PAT 1037. 在霍格沃茨找零钱(20)
    PAT 1036. 跟奥巴马一起编程(15)
    Topcoder SRM633 DIV2 解题报告
    HDU 4565 So Easy! 矩阵快速幂 + 共轭数
    HDU 2256 Problem of Precision 矩阵快速幂 + 共轭数
    FZU 1683 纪念SlingShot 矩阵快速幂
    CodeForces 185A Plant 矩阵快速幂
    HDU 2604 Queuing 矩阵快速幂
    HDU 1575 Tr A 矩阵快速幂
    HDU 1757 A Simple Math Problem 矩阵快速幂
  • 原文地址:https://www.cnblogs.com/ss561/p/4611056.html
Copyright © 2011-2022 走看看