温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

web开发第二讲美化界面css基础知识点

发布时间:2020-07-17 01:47:30 来源:网络 阅读:170 作者:wx5dad8c26324df 栏目:web开发
    首先我们已经了解过网页设计的基础html,具体怎么美化怎么更加方便的设计文字的样式等方面,所涉及的知识点称为css,在后期网页美化中非常重要。以下主要分两个模块来介绍css。
            第一:常涉及到的三种层叠样式表,分别是:
            1、行内样式表
            <标签 ></标签>
            该方式不经常使用
            2、页面内样式
            <head>
         <style>
                        标签名{
                                            样式名:样式值;
                                                    }
            </style>
            </head>
            首先在<head>里面嵌套一个 <style><style>          然后具体再在里面进行样式参数取值。
            3、外部链接表
            <head>
             <link rel="stylesheet" type="text/css" href="链接样式表文件.css"/>
            </head>
            首先要在html下的<head>里面加入<link rel="stylesheet" type="text/css" href="链接样式表文件.css"/>其次再新建一个css文件,然后再该文件下编辑样式界面设定语句。
            标签名{
                                样式名:样式值;
                                }
        此时的标签名可以由三种方式,分别是
        类选择器
        .name{}
        调用:
        <any class="name"></any>
        ID选择器
        命名:
        #name{}
        调用:
        <any id="name"></any>
        标签选择器
        标签名{}   
        调用
        <标签>
            注意:id选择器以#开始,单词调用。而class类选择器可以多次调用,以. 开始。
            以上三种层叠样式表的优先级如下:
            行内>页面内>外部样式表
            第二:所涉及常用属性以及属性值

color:red; //字体颜色:红色
text-align:center; //文本居中 left/center/right/justify 左/中/右/两端对齐
font-weight:bold; //字体加粗 bold/bolder
font-style: italic; //字体倾斜
text-decoration: underline/none; //下划线/去掉下划线
font-size:19px; //字体大小:19像素;
font-family:宋体;
font:19px 宋体; //字体大小 字体;
background:背景颜色 背景图片 背景是否重复 背景定位位置
//背景图片 url(图片路径)
// 是否重复 repeat/no-repeat/repeat-x/repeat-y 重复/不重复/水平重复/垂直重复
//背景定位位置 left/center/right 水平左中右 top/center/bottom 垂直上中下
background-size:精确像素/百分比 /em/rem 背景图片大小控制
background-attachment: scroll; //背景图片固定定位 scroll 滚动 fixed 固定
width:400px; 宽度
height:300px; 高度
border:solid 1px #000; 边框线 :实线 线粗细 线颜色
线型:solid 实线 double 双线 dotted 点状线 dashed 虚线 none无边框线
填充:
padding-top
padding-left
padding-right
padding-bottom
简写:
padding:值
padding:a
一个值表示四边相同的填充
padding:a b;
两个值表示上下是a,左右是b
padding:a b c;
三个值表示上是a,左右是b,下是c
padding:a b c d;
四个值表示:上,右,下,左
边距:margin:值(同上)
*{ //通配符
margin:0;
padding:0;}
行高 ling-height 行间距
一般用行高布局垂直对齐方式
行高和高度一致,内容在垂直正中间
行高比高度大,内容在偏下
行高比高度小,内容偏上
首行缩进
text-indent:2em; 首行缩进两个字符
浮动:
float:left /right 左浮动、右浮动
margin:0 auto;水平居中
文本转换 text-transform:uppercase/lowercase/capitalize
大写、小写、首字母大写
列表:
list-style-type 列表样式
list-style-image 列表图片
list-style
行内元素(内联元素) a span input img label select strong b
块级元素 div p h2~h7 table ul ol dl form pre
display:block; 转换为块级元素 (占一行)
display:inline-block; 转换为行内块 (宽高起作用)
display:inline; 转换为行内元素 (占内容位置)
超链接四种状态
a:link 访问前的状态
a:hover 鼠标悬停时状态
a:active 鼠标点击时的状态
a:visited 访问后的状态

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI