zoukankan      html  css  js  c++  java
  • 前端html和css

    1、CSS介绍
        概念:层叠样式表或者级联样式表(Cascading Stylr Sheets)
        层叠;CSS特性
        CSS作业:设置网页结构的样式(改变html标签的样式),通过CSS给HTML标签设置属性到改变样式
        CSS书写位置介绍:
            * 内嵌式写法:书写在HTML的head位置
                <style type="text/css">书写CSS代码</style>
            * 外链式写法
            * 行内式写法
        CSS语法:
            * 选择器 {属性:值;属性:值}
                选择标签的过程
                ** 标签选择器
                ** 类选择器
                ** id选择器
                ** 通配符选择器
                ** 交集选择器(标签指定式)
                ** 后代选择器
                ** 子代选择器
                ** 并集选择器
                补充选择器(C3):
                    伪类选择器:
                    属性选择器
                    伪元素选择器:
            * CSS样式的基本属性(字体属性,颜色属性,边框属性)
                ** 字体属性:主要包括字体综合设置、字体名称、字体大小、字体风格、字体加粗、字体英文大小写转换
                    font:设置或者检索对象中文本特性的复合属性
                    font-family:一个指定字体名称或者一个种类的字体名称(一次可以设置多个字体,字体与字体之间用“,”隔开)
                        * 直接设置字体对应的名称(黑体,宋体)
                        * 设置字体对应的英文名称(SimSun,NSimSun,SimHei)
                    font-size:字体显示的大小
                    font-style:以3种方式的一种显示字体:normal(普通)、italic(斜体)和oblique(倾斜)
                    font-weight:使字体加粗或者变细(normal,700-加粗,bold-加粗,400-正常显示)
                    font-variant:设置英文大小写转换
                ** 颜色和背景属性
                    CSS的颜色属性允许设计者指定页面元素的颜色,背景属性用于指定页面的背景颜色或背景图像的属性
                    color:设定页面颜色的前景色
                    background-cokor:设定页面元素的背景色
                    background-image:设定页面元素的背景图像
                    background-repeat:设定一个指定的背景图像被重复的方式
                    background-attachment:设定背景图像是的跟随页面滚动
                    background-position:谁当水平或者垂直方向上的位置
                    background:背景属性的综合指定
                ** 边框属性
                    用于设置一个元素边框的宽度、样式和颜色
                    border  边框符合属性
                    border-top:上边框
                    border-left:左边框
                    border-right:右边框
                    border-bottom:下边框
                    border-color:边框颜色
                    border-style:边框样式
                    border-width:边框宽度
                    border-top-color:上边框颜色
                    border-bottom-color:下边框颜色
                    border-left-color:左边框颜色
                    border-right-color:右边框颜色
                    border-top-style:上边框样式
                    border-bottom-style:下边框样式
                    border-left-style:左边框样式
                    border-right-style:右边框样式
                    border-top-width:上边框宽度
                    border-bottom-width:下边框宽度
                    border-left-左边框宽度
                    border-right-width:右边框宽度
                **边框样式属性
                    none:无边框
                    hidder:隐藏边框(IE不支持)
                    dotted:边框由点组成
                    dashed:边框由短线组成
                    solid:边框是实线
                    double:边框是双实线
                    groove:边框带有立体感的沟槽
                    ridge:边框成脊型
                    inset:边框内嵌一个立体边框
                    outset:边框外嵌一个立体边框
    
    
    
            * 标签选择器
                HTML标签名 {属性:值;}:会把页面中的所有相同的标签都会选中
                    常用属性:
                        color:设置前景色(文字颜色)
                        background-color:设置背景色
                        font-size:设置文字大小
                        width:设置宽度
                        height:设置高度
                        text-align: center;设置内容(文字、图片)显示位置
                            注意:该属性只能给块级元素设置
                        text-indent: 2em; 设置首行缩进两个字符
    
                        <style type="text/css">
                            /*标签选择器*/
                            p {
                                color: rgb(234,12,12);  /*改变文字颜色*/
                                font-size: 50px; /*改变文字大小 */
                                background-color: #D82F92; /*改变背景颜色*/
                                width: 300px; /*设置宽度*/
                                height: 300px;  /*设置高度*/
    
                            }   
                        </style>    
            * 单位介绍
                px:像素
                em:1em = 一个文字大小
            * 颜色的表示方式
                ** 直接设置颜色的名称:red,green,pink
                ** 使用十六进制表示 #0-f
                ** 使用三原色rgb()
                        r:0-255
                        g:0-255
                        b:0-255
                ** 半透明颜色:background-color: rgba(0,0,0,0.5);
                    rgba()
                    a : 0-1
                ** 使用opacity实现半透明
                    opacity:0-1
                    background-color: #D82F92;
                    opacity: 0.5;
                    filter:Alpha(opacity=50);/*IE8以及更早版本的浏览器*/
            * 类选择器
                .自定义类名 {属性:值;}
                使用:
                    ** 通过.自定义类名,定义一个类样式
                        .p_red { color: red;}
                    ** 标签通过class属性调用类样式
                        <p class="p_red">类选择器1</p>
                特点:
                    ** 一个类样式可以被多个标签调用
                    ** 一个标签可以同时调用多个类样式,只需要在类名字之间加一个空格
                        <p class="p_red public_size">类选择器1</p>
                        <p class="p_green public_size">类选择器2</p>
                命名规范:
                    头;header
                    内容:content、container
                    尾:footer
                    导航:nav
                    侧栏:sidebar
                    栏目:column
                    页面外围控制整体布局宽度;wrapper
                    左右中;left right center
                    登录条:loginbar
                    标志:logo
                    广告:banner
                    页面主体:main
                    热点:hot
                    新闻:news
                    下载:download
                    子导航:subnav
                    菜单:menu
                    子菜单:submenu
                    搜索:search
                    友情链接:friendlink
                    页脚:footer
                    版权:copyright
                    注意:不能使用纯数字或者以数字开头定义类名
                          不能使用中文命名
                          不能使用特殊字符或者使用特殊字符开头定义类名
                          不推荐使用类名和标签名定义类名
            * ID选择器(不建议用)
                语法:#自定义名称 {属性:值;}
                使用:
                    ** 首先通过#自定义名称,定义一个id选择器样式
                        #p_color {color:red;}
                    ** 标签通过id属性调用id样式
                        <div id="p_color">gerrynihao</div>
                ID选择器与类选择器的区别:
                    ** 页面中标签的id必须唯一,不能重用样式的定义
                    ** 一个标签只能调用一个id样式,id选择器不能调用多个ID样式,类选择器可以调用多个类样式
            * 通配符选择器
                语法:* {属性:值;}
                特点:该选择器会把所有标签都选中(包括body选择器)
                应用:样式初始化使用(因为不同的浏览器有不同的默认样式,需要初始化页面的文字样式)
            * font属性联写
                font:font-size font-weight font-style font-family line-height
                font:700(粗体) italic(斜体) 30px(字体大小)/20px(行高) 微软雅黑;
                注意:
                    1.属性联写书写过程中必须要设置font-size和font-family,其他可以设置也可以不设置
                    2.在属性联写中font-size必须要放在font-family之前(例如:30px/20px 微软雅黑)
                    3.如果font属性联写中的属性都要设置,则按照上面顺序设置
            * 复合选择器
                **标签指定式选择器
                    语法:
                        标签名.类名 {属性:值;}
                    或者 标签名#id名 {属性:值;}
                    div.one {
                        color: red
                    }
                ** 后代选择器
                    注意:
                        1,后代选择器标签之间必须是嵌套关系
                        2.选择器与选择器之间必须用空格隔开
                        3.后代选择器只能选择后代标签
                    语法:
                        选择器 选择器 选择器 {属性:值;}
                    div p {
                        color: green
                    }
                * 并集选择器
                    语法:
                        选择器,选择器 {属性:值}
                    注意:
                        1.选择器与选择器之间必须用“,”隔开
                        2.选择器标签之间的结构可以是任意一种关系
                * 子代选择器
                    语法:
                        选择器>选择器 {属性:值;}
                    注意:
                        1.子代选择器之间必须是嵌套结构
                        2.子代选择器只能选中直接后代元素
                        3.后代选择器可以选中所有后代元素
                        div>span {
                            color: red;
                        }
                * 属性选择器(会把页面中所有的属性相同的样式进行改变)
                    语法:
                        [属性名] {属性:值;}
                        [id][class] {
                            color: red;
                        }
                    属性其他选择器
                        [属性=值] {}   
                        [属性^=字母] { }  选中以字母开始的标签
                        [属性$=字母] { }  选中以字母结尾的标签
                        [属性*=字母] { }  选中包含字母的标签
    
                * 伪类选择器(用于列表标签)
                    ◇ 结构伪类
                      语法:
                            选择器:first-child {属性: 值;}
                            选择器:last-child {属性: 值;}
                            选择器: nth-child(n) {属性: 值;}
                            选择器:nth-last-child(n) {属性: 值;}
                            选择器:nth-child(odd) {属性: 值;} 奇数
                            选择器:nth-child(even) {属性: 值;} 偶数
                    ◇ 目标伪类
                    ◇ 空伪类
                    ◇ 排除伪类
  • 相关阅读:
    Entity Framework Core 2.0 新特性
    asp.net core部署时自定义监听端口,提高部署的灵活性
    asp.net core使用jexus部署在linux无法正确 获取远程ip的解决办法
    使用xshell连接服务器,数字键盘无法使用解决办法
    使用Jexus 5.8.2在Centos下部署运行Asp.net core
    【DevOps】DevOps成功的八大炫酷工具
    【Network】Calico, Flannel, Weave and Docker Overlay Network 各种网络模型之间的区别
    【Network】UDP 大包怎么发? MTU怎么设置?
    【Network】高性能 UDP 应该怎么做?
    【Network】golang 容器项目 flannel/UDP相关资料
  • 原文地址:https://www.cnblogs.com/slmdr9/p/12201743.html
Copyright © 2011-2022 走看看