JavaWeb CSS样式

css基本使用

1、使用css的好处

css样式，就是用来美化网页(美颜)。非常方便，维护性好。
层叠:
一层一层:强调的是优先级.
样式表:
很多的属性和属性值
回顾: html使用标签把要操作的数据包裹起来，通过修改标签的属性值，来实现标签内数据的变化
2、css将网页内容和显示样式进行分离，提高了显示功能
3.提取出html标签中的大部分属性，进行统- -的管理。简化html网页代码结构,同时还可以对多个html网页进
行统- -管理

2、css基本使用

1、内嵌样式

1)需要在head标签中，写style标签。
2)在style标签中，写css样式
2外部样式
1)创建css文件，后缀.css
2)把样式放在css文件中:
3)把css样式文件引入到html文件中

引人方式1:
rel="stylesheet":引入是脚木文件
type= "text/css":表示是css文件
href="../css/style. css":表示引入文件的路径
<link rel="stylesheet" type= "text/css" href-"../css/style.css"/>

引入方式2
<style>
@import ur1("../css/sty1e.css");
</style>

3)行内样式:就是直接在标签上写样式
1)在标签上添加style属性
2)语法: style=“属性1:值1;属性2:值2;…”;|

一般结合选择器来选择标签，添加css样式

选择器的分类

1、标签选择器：就是用来选择标签的！
语法：标签名{
属性：属性值
}

<style>font{color: aqua;}</style>

color:颜色
font-size:字体大小

2、类选择器（class选择器）：选择添加了class属性的标签
语法：

.类名{
属性：属性值
}

对应的使用需要写class=类名
3、id选择器：选择指定的标签，这个标签在当前网页中使用唯一的id
语法：

#id名{
属性：属性值
}

id名必须和属性的id名一样
class和id属性任何标签都可以使用
选择器优先级：id>class>标签
行内样式>内嵌>外部

css选择器

1、基本选择器
id选择器、class选择器、标签选择器

2、复合选择器
两个或者两个以上的基础选择器通过不同的方式连接在一起。

后代选择器:找到指定标签的所有特定的后代标签，设置属性

#选择器1 选择器2... {
属性:值;
}

注意点: .
1.后代选择器必须用空格隔开
2.后代选择器可以通过空格一直延续下去

子元素选择器:找到指定标签中所有特定的直接子元素，然后设置属性

#选择器1>选择器2 {
属性:值:
}

并集选择器:将同一个样式作用于更多的元素

选择器1，选择器2{}

交集选择器

选择器1.选择器2{
}

伪类选择器
语法

标签名：具体操作{
//样式
}

css常用属性

1、字体属性

2、文本属性

text-decoration:none:表示没有修饰 underline：下划线 overline:上划线

3、背景属性

如果设置div的行高和div的高度一致，那么div的文字就会垂直居中
4、列表属性

JavaWeb CSS样式相关推荐

JavaWeb开发前端语言：jQuery（二）属性操作、DOM的增删改、CSS样式操作、动画、事件操作
JavaWeb开发前端语言:jQuery(二) 1.jQuery的属性操作 2.jQuery练习:使用jQuery完成全选.全不选.反选和提交功能 3.DOM的增删改 3.1 DOM的增操作 3.1 ...
JavaWeb——框架与css样式表练习题
一.商城页面素材代码实现  <!DOCTYPE html> <html><head><meta charset=" ...
内联式css样式，直接写在现有的HTML标签中
CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种.这一小节先来讲解内联式. 内联式css样式表就是把css代码直接写在现有的HTML标签中 ...
css样式之边框和内外边距
1.css样式之边框:border 实心的边框: <!DOCTYPE html> <html> <head> <meta http-equiv="c ...
CSS（2 ）-- CSS样式大全
常用css样式大全Author:xu_shuyi201504039.CSS颜色代码大全http://www.cnblogs.com/axing/archive/2011/04/09/CSS.html1 ...
MOSS的CSS样式说明，一个老外总结的
MOSS的CSS样式说明,一个老外总结的 http://www.heathersolomon.com/content/sp07cssreference.htm 转载于:https://www.cnbl ...
float属性html,详解CSS样式中的float属性
详解CSS样式中的float属性.float是 css 样式的定位属性.我们在印刷排版中,文本可以按照需要围绕图片.一般把这种方式称为"文本环绕".在网页设计中,应用了CSS的fl ...
一个DIV调用多个CSS样式
1使用以上两个CSS样式表对描述同一个DIV的写法class利用class可以对于同一个标签多重定义样式. 比如用1.2两种样式同时控制一个DIV,可以写成以下格式: <div class=&q ...
关于CSS样式浏览器兼容问题的一些注意事项
CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不 ...

JavaWeb CSS样式

css基本使用

css选择器

css常用属性

JavaWeb CSS样式相关推荐

最新文章

热门文章