• web从入门开始(7)-----css


    CSS的语法格式

    l  一个CSS规则,有“选择器”和“格式声明语句”构成

    l  选择器:就是选择HTML标记,换句话说就是给那个HTML标记加样式

    l  格式声明语句:由{ }构成,{ }中是各种格式语句。

    l  一条格式语句,由“属性名:属性值”构成。

    l  每一条格式语句,必须用英文下的“;“构成

    l  属性名,就是CSS中的各种属性,这些属性名都是固定的

    l  属性值:一个属性名可以去不同的值,这个值是不加引号的。

    l  CSS中的数字单位,都是PX,这个PX 不能省略。

    选择器

    1. 基本选择器

        1) “*”选择器:通配符

          l  描述:将匹配所有的HTML标记,所有的标记都会改变

          l  语法:*{ color:red;}

          l  注意:”*”尽量少用,因为IE6不支持

          

        2) 标签选择器

          l  描述:将匹配指定的HTML标记

          l  语法:匹配标记{ 属性 }

          例如: p{ color:red ; } 所有的p标记会变

          l  注意:CSS标签选择器,与HTML标记名称一样,但是不能加尖括号

        3) class选择器(类选择器)

          l  描述:给一类HTML标记加样式,这里所指的“一类”是:每一个HTML标记都有一个class属性,并且class的值都一样。Class属性是公共属性,每个HTML标记都有

          l  语法:.class名称{属性}

          例如:.myClass{ color:red;}

          l  注意:类选择器的名称必须以”.”开头,后跟HTML标记的class属性的值,

          l  HTML标记的class属性的值,不能以数字开头

    给每个标记添加属性class并指定其名称,所有同名称class标记都会改变

        4) Id选择器-----实际应用中,是基本不使用的

          l  描述:是给指定id 的冤死添加样式的

          l  注意:网页中,不能存在多个同名的id 属性,值必须是唯一的

          Id属性也是公共属性,每个HTML标记都有一个公共属性

          ID属性一般是给JS使用的,不是让你来加样式的clss属性只能给CSS用,不能给JS用

          ID选择器的名称,必须以“#”开头,后跟HTML标记的ID 属性的值

    1. 组合选择器

    1) 多元素选择器

      l  描述:给多个元素加同一个样式,多个选择器之间用“,”隔开。

      l  举例:h1,p,div,body{ color:red;}

       H1,p, .class{color:red;}

    2) 后代元素选择器

      l  描述:给某个标签的某个后代元素加样式,选择器之间用“空格”隔开。

      l  举例:div .title{ color: red;} 

              可以增加前缀 die h1.title{ color:red;} 

    后面的标记,必须存在于前面标记的里面

    3) 子元素选择器

      l  描述:只给某个标签的某个儿子元素加样式

      l  举例:div>.title{ color: red;}  

    CSS注释

    CSS注释:/*注释内容*/

    HTML注释;<!-HTML注释-->

    CSS尺寸属性

    width:元素宽度,一定加px单位

    height:元素高度

    margin:50px auto;    移动边框实现居中,50px代表上下的距离,auto为左右距离,表示左右居中

    CSS字体属性

    font – size:文字大小: 如:font – size :14px

    font – family:字体: 如:font – family:黑体

    font – style:斜体 取值:italic 

    font – weight: 粗体 取值bold 如:font- weight:bold

    CSS文本属性

    color :文本颜色

    text – decoration :文本修饰线,取值none(无),underline(下划线),overline(上划线),line-through(删除线)

    text – align:文本的对齐方式,取值:left,center,right

    line – height:行高,可以用固定值,也可以用百分比

    text – indent:首行缩进:

    letter-spacing:字间距

    CSS伪类选择器:给超链接加样式

    一个超链接有4个状态:

           正常状态(:linkl):鼠标没放上之前

           放上状态(:hover):鼠标放到链接上时的样式

           激活状态(:active):按住鼠标左键不松开时的样式

           访问后状态(:visited):链接被打开过后的状态

      在平常生活中,会使用下面写法,给链接加不同的样式

    //将正常状态和访问过状态合二为一;

    CSS列表属性

     list -style:列表样式,取值:none.去掉项目符号前面的符号

    CSS边框属性:每个元素都可以加边框线

    border-left:左边框线。

    格式 border-left: 粗细 线型 线的颜色

    线型:none(无线),solid(实线),dashed(虚线),dotted(点状线)

    border -right:右边框线

    border -top:上边框线

    border -bottom:下边框线

    border:同时给所有边框加线

    CSS内边距属性:边框线到内容间的距离

    注意:平常我们所说的width和height属性,他们指的宽度和高度,不含内外边距,边框线

    Padding-left

    Padding-right

    Padding-top

    Padding-bottom

    缩写形式:

    Padding:10px     四个边的内填充分别为10px

    Padding:10px 20px;表示上下为10px 左右为20px

    Padding:5px 10px 20px;表示上为5px,左右10px,下为20px

    Padding:5px 10px 15px 20px; 顺序为上右下左

    CSS外边距属性:边线往外的距离---------margin

    CCS背景属性

    background-color:背景颜色

    background-image:背景图片  例:background-image:src:图片地址

    background-repeat:背景平铺方式  取值:no-repeat(不平铺),repeat-x(水平平铺),repeat-y(垂直平铺)

    background-position:背景定位

    l  格式:background-position:水平方向定位   垂直方向定位

    l  Background-positio:50px  50px//背景距离容器地方左边50px,容器顶端50px

    l  百分比定位:background-position:50% 50%

    简写方式

           background:背景色  背景图  平铺方式  定位方式

    CSS浮动和清除

           float:让元素浮动   取值:left(左浮动),right(右浮动)

    :清除浮动   取值:left(清除左浮动),right(右浮动)

    意义:所谓浮动相当是把元素上升了一层空间,他不占用原来空间的位置

    作用:浮动的所有元素是以单个的个体出现的

    所以就解决了一个功能,就是把所有的块元素并列显示(正常下,一个块元素是占用一行的)

    CSS继承性

           外层元素的样式,会被内层元素尽心国际城。多个外层元素的样式,最终会叠加到内层上

    CSS优先级

           行内样式>ID选择器>class选择器>标签选择器

     

  • 相关阅读:
    spring security注解(1)
    替换localhost:8080(假域名,本地使用)
    java线程
    总结正则表达式
    试卷袋封面打印项目总结--重构项目总结
    试卷袋封面打印项目总结--兼容处理
    05 http状态码
    01HTTP的前世今生
    人人都看得懂的正则表达式教程
    Chrome 开发者工具(DevTools)中所有快捷方式列表
  • 原文地址:https://www.cnblogs.com/tangwanzun/p/5955932.html
Copyright © 2020-2023  润新知