css基础

添加样式发噶发：

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)

多重样式：

外部样式

h3
{
    color:red;
    text-align:left;
    font-size:8pt;
}

内部样式：

h3
{
    text-align:right;
    font-size:20pt;
}

最后的实际样式

color:red;
text-align:right;
font-size:20pt;

优先级：

内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

优先级顺序

下列是一份优先级逐级增加的选择器列表：

通用选择器（*）
元素(类型)选择器
类选择器
属性选择器
伪类
ID 选择器
内联样式

优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

把一个标签从祖先那里继承来的而自身没有的属性叫做"祖先样式"，那么"直接样式"就是一个标签直接拥有的属性

link 属于 HTML，通过 <link> 标签中的 href 属性来引入外部文件，而 @import 属于 CSS，所以导入语句应写在 CSS 中，要注意的是导入语句应写在样式表的开头，否则无法正确导入外部文件；
@import 是 CSS2.1 才出现的概念，所以如果浏览器版本较低，无法正确导入外部样式文件；
当 HTML 文件被加载时，link 引用的文件会同时被加载，而 @import 引用的文件则会等页面全部下载完毕再被加载；

CSS 属性定义背景效果:

background-color
- 十六进制 - 如："#ff0000"
- RGB - 如："rgb(255,0,0)"
- 颜色名称 - 如："red"
background-image
background-image:url('paper.gif'); 默认情况下，背景图像进行平铺重复显示
background-repeat

background-image:url('gradient2.png');
background-repeat:repeat-x;

no-repeat

background-attachment

background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。  scroll  fixed   inherit

background-position

利用 background-position 属性改变图像在背景中的位置:
background-position:right top;

简写：

background:#ffffff url('img_tree.png') no-repeat right top;

background-position:-30px -50px;该怎么理解？

使背景图片向左移动30像素, 向上移动50像素.background-position: x y;x向右为正, y向下为正

选择器的权值不能进位。

文字属性：

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

text-decoration 属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration属性主要是用来删除链接的下划线：

h1 {text-decoration:overline;} 
h2 {text-decoration:line-through;} 
h3 {text-decoration:underline;}

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

文字缩进

p {text-indent:50px;}

文字间隙：

h1 {letter-spacing:2px;}

行高：

p.small {line-height:70%;}

一行文本的行高为：上间距 + 文本的高度+下间距，并且上间距是等于下间距的

行内框盒子模型

https://www.cnblogs.com/zhangyachen/p/8035661.html

内容区域 content area

围绕盒子看不见的区域，大小与font-size相关，高度就是上面图示中的文本高度。我们可以理解成选中文字之后的变色区域。
内容区域高度 = 字体大小

内联盒子 inline boxes
行框盒子 line boxes
包含盒子 containing box

div.ex1 {direction:rtl;}

单词之间间隙：

word-spacing:30px;

禁止文字环绕
white-space:nowrap;

文字对齐方式

img.bottom {vertical-align:text-bottom;}

文字阴影

h1 {text-shadow:2px 2px #FF0000;}

text-shadow: h-shadow v-shadow blur color;
h-shadow    必需。水平阴影的位置。允许负值。
v-shadow   必需。垂直阴影的位置。允许负值。
blur     可选。模糊的距离。
color    可选。阴影的颜色






Css字体
CSS字体属性定义字体，加粗，大小，文字样式。
自定义字体：

@font-face {
font-family: "AncientWar";
src: url('style/css/fonts/AncientWar.ttf');
}


font-family属性是多种字体的名称，作为一个"应变"制度，以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持的第一个字体，它尝试下一个的字体。

p{font-family:"Times New Roman", Times, serif}   https://www.runoob.com/cssref/css-websafe-fonts.html

字体样式

p.normal {font-style:normal;}  正常 
p.italic {font-style:italic;}斜体 
p.oblique {font-style:oblique;} 倾斜的文字

字体粗细：

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}   定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。

字体大小：
1em和当前字体大小相等。在浏览器中默认的文字大小是16px。


例子：

font-family:Verdana,KaiTi;
            font-style: italic;
            font-size:40px;
            font-weight: bold;
            width:100%;
            height:100px;
            background: red;
            text-align: right;

效果

 链接：

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

例子：

        /*连接正常样式*/
        .link:link{
            display: inline-block;
            padding:1px 5px;
            border:1px solid #eeeeee;
        }
        /*访问后的样式*/
        .link:visited{
            border:1px solid red;
        }
        /*鼠标移动在上面的样式*/
        .link:hover{
            color:red;
        }
        /*点击那一刻的样式*/
        .link:active{
            background: pink
        }

文本修饰：

text-decoration 属性主要用于删除链接中的下划线：

a:link {text-decoration:none;}
a:visited {text-decoration:none;}删除下划线
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;} 添加下划线

列表：

无序列表、有序列表

list-style-type属性指定列表项标记的类型是：
ul.a {list-style-type:circle;} 圆形
ul.b {list-style-type:square;}方形
ol.c {list-style-type:upper-roman;}罗马数字
ol.d {list-style-type:lower-alpha;}小写字母
要指定列表项标记的图像，使用列表样式图像属性：
list-style-image: url('sqpurple.gif');
简写属性：
list-style: square url("sqpurple.gif");

例子：

li{
            list-style-type:square;
            list-style-position: center;
            list-style-image: url('../btn2.jpg');
        }

表单：

指定CSS表格边框，使用border属性。

下面的例子指定了一个表格的Th和TD元素的黑色边框：

table, th, td
{
    border: 1px solid black;
}

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：

border-collapse:collapse;

table { border-collapse:collapse; }

Width和height属性定义表格的宽度和高度。

text-align属性设置水平对齐方式，向左，右，或中心：td

垂直对齐属性设置垂直对齐，比如顶部，底部或中间：

td
{
    height:50px;
    vertical-align:bottom;
}

例子：

    table{
            border-collapse: collapse;
            width:600px;
            border:1px solid #98bf21;
        }
        th{
            padding:5px 5px;
            background-color:#A7C942;
        }
        td,th{
            
            border:1px solid #98bf21;
            
            text-align: center;
        }
        td{
            background-color:#EAF2D3;
        }

设置表格标题位置

caption {caption-side:bottom;} top

posted on 2019-08-10 01:11 渐凸强、啊哈阅读(137) 评论(0) 编辑收藏举报

刷新页面返回顶部

css基础

优先级顺序

background-position:-30px -50px;该怎么理解？

行内框盒子模型

https://www.cnblogs.com/zhangyachen/p/8035661.html

公告