CSS

最新推荐文章于 2024-07-24 16:53:23 发布

Y_ZhiWen

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量669

点赞数 1

文章标签： html w3c css

本文链接：https://blog.csdn.net/Y_ZhiWen/article/details/51530802

版权

待显示专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS

—-分离网页内容结构和格式控制

W3C CSS

使用

css语法结构由3部分组成：选择符、样式属性、值
- 选择符：选择要修饰的对象，可以使HTML的标签，也可以是特定id、class的标签
- 属性：颜色、大小，定位、浮动方式
- 值：属性值

语法：选择符{样式属性:值; 样式属性:值; ...}

添加CSS方法
- 链接外部样式表
- 内部样式表
- 导入外部样式表
- 内嵌样式

1、链接外部样式表

<head>

<link rel=stylesheet type=text/css href=slstyle.css >

</head>

2、内部样式表

<head>

<style type="text/css">
body{
    margin-left:0px;
    margin-top:0px;
    margin-right:0px;
    margin-bottom:0px;
}

.style1{
    color:#fbe333;
    font-size:12px;
}
</style>

</head>

3、导入外部样式

指在内部样式表的<styple>中使用@import导入外部样式表
<head>

<style type="text/css">
@import slstyle.css
</style>
</head>

4、内嵌样式

<table style=color:red; margin-right:220px>

选择器

选择器：

css样式声明定义
选择器{
    样式;
}

标签选择器

h1{
    ...;
}

h1,p,body{
    ....;
}

通用选择器

它使用一个（*）号指定，它的作用是匹配html中所有标签元素
* {color:red;}

类选择器

.类选器名称{css样式代码;}
h1.类选择器{ ...; }
*.类选择器{ ...; }

<span class="stress">胆小如鼠</span>

多类选择器

.类1.类2{ ...; }

.important.warning {background:silver;}
<p class="important warning">
This paragraph is a very important warning.
</p>
<p class="important urgent warning">
This paragraph is a very important and urgent warning.
</p>

ID选择器
在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：
1、为标签设置id=”ID名称”，而不是class=”类名称”。
2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。

ID选择器和类选择器区别：
相同点：可以应用于任何元素
不同点：

ID选择器只能在文档中使用一次
可以使用类选择器词列表方法为一个元素同时设置多个样式。<span class="stress bigsize">三年级</span>

什么时候用id，什么时候用class?

W3C标准这样规定的，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。这样，一般网站分为头，体，脚部分，因为考虑到它们在同一个页面只会出现一次，所以用id，其他的，比如说你定义了一个颜色为red的class，在同一个页面也许要多次用到，就用class定义。另外，当页面中用到js或者要动态调用对象的时候，要用到id，所以要根据自己的情况运用。自己的语言

#intro {font-weight:bold;} 等价 *#intro {font-weight:bold;}

属性选择器

*[属性]{ ...; }

*[title] {color:red;}  应用<h2 title="Hello world">Hello world</h2>
a[href] {color:red;}    应用<a href="http://w3school.com.cn">W3School</a>
a[href][title] {color:red;} 需同时拥有这两个属性    

a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;} 可以设定值，不能应用于其他值中

p[class="important warning"] {color: red;}

还可以匹配属性的开头，结尾等

包含（后代）选择器
包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：

.first  span{color:red;}
>作用于元素的第一代后代，空格作用于元素的所有后代。

子选择器
子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。（不包括孙子）

.food>li{border:1px solid red;}

可结合后代选择器：
table.company td > p

相邻兄弟选择器
h1 + p {margin-top:50px;}
选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素,用一个结合符只能选择两个相邻兄弟中的第二个元素

结合其他选择器:
html > body table + ul {margin-top:20px;}

伪类选择符
它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{color:red;}
分组选择符
当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：

h1,span{color:red;}
.first, #second span{color:green;}

属性

字体

.font_css{
    font-family:"宋体","黑体",...;  // 类似<font face> ,宋体不支持，则黑体，否则系统默认字体
    font-size:12px // 还支持 xx-small ...
    font-style:normal / italic / oblique 
    font-weight:normal / bold / bolder / lighter / 自定义数字
    font-variant:normal / small-caps(小写英文转大写英文)
    font:bold italic "宋体"
}

颜色背景

.back_css{
    color:#fff098
    background:#ffff00
    backgroun-image:url(images/ber_12.gif(地址))
    background-repeat:no-repeat / repeat / repeat-x / repeat-y // 背景平铺方式
    background-attachment:scroll / fixed // 设置背景是否随对象滚动
    background-position:0% 50% / left top (center right bottom)
}

段落

.paragraph_css{
    word-spacing:3px / -1px //单词间隔
    letter-spacing:3px / -1px // 字符间隔
    text-decoration:none / underline / overline / line-through / blink // 文字修饰，下划线...
    vertical-align:baseline / sub / super / top / text-top middle / text-bottom // 垂直对齐方式
    text-align:left / right / center / justify(两端对齐)
    text-transform:none / capitalize / uppercase / lowercase
    text-indent:25px // 文本缩进
    line-height:12px // 文本行高
    white-space:normal(默认，将多个空格合并) / pre (保留) // 处理空格
    direction:ltr / rtl / inherit
}

外边距内边距

外边距：元素周围边界宽度
内边距：边框与元素的间距

盒子模型

这里写图片描述
- 组成：Content（内容）、padding（内边距）、border（边框）、margin（外边距）
- Content：属性有width、height、overflow
- padding：内容区与边框之间的空间，属性有padding-top、padding-bottom、padding-left、padding-right
- border：属性有：border-style、border-width、border-color
- margin：边框外的空间，属性有margin-top、margin-bottom、margin-left、margin-right

CSS 外边距合并

定位

.pos_css{
    position: static / absolute / fixed / relative
    top:
    right:
    bottom:
    left:
}

。。。。。。。。。。。。。。。。。。。。

列表

ol{
    list-style-type:disc / circle / sqare / ..
    list-style-image:url(path)
    list-style-position:outside / inside // 列表缩进
}

光标

ol{
    ..
    cursor:.....
}

Y_ZhiWen

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS

CSS—-分离网页内容结构和格式控制W3C CSS使用css语法结构由3部分组成：选择符、样式属性、值选择符：选择要修饰的对象，可以使HTML的标签，也可以是特定id、class的标签属性：颜色、大小，定位、浮动方式值：属性值语法：选择符{样式属性:值; 样式属性:值; ...}添加CSS方法链接外部样式表内部样式表导入外部样式表内嵌样式1、链接外部样式表<head><li
复制链接

扫一扫

专栏目录