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

发布时间：2020-07-17 01:47:30 作者：wx5dad8c26324df
来源：网络阅读：168

    首先我们已经了解过网页设计的基础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 访问后的状态

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

相关阅读